是否可以在显示内联块上创建显示/隐藏而不影响相邻元素？

Question

我已经创建了我遇到的问题的演示： http://jsbin.com/omomit/2

当您单击显示/隐藏链接时，您会看到隐藏的文本出现。我想要修复的行为是它如何下推第一行和第二行内容，而不仅仅是其所在的父容器。

换句话说，如果您为每个列表项添加标签，它将如下所示：

AB         ( <---这是一个伪行，因为它不是编程为一行）
CD

当我单击 A 的切换开关时，它看起来像这样（H 表示隐藏内容）：

A B
H _
CD

D已经被推倒了，这是不应该发生的。相反，我希望它只是这样：

A B
HD
C

我知道我可以使用浮动来解决这个问题，但我不想使用浮动的原因是因为这些列需要模拟一个表，这样，无论每个人造列模块的高度如何，它们都会在人造列中对齐-排。每个人造行从上到下相互对齐是至关重要的，这就是为什么我也使用垂直对齐设置为顶部的原因。

是否可以拥有此切换脚本功能，以便它仅影响使用它的父容器？

Answer 1

我不能 100% 确定您的要求，但如果您在绝对定位的元素内显示/隐藏内容，它不会影响布局。

尝试将这些 CSS 属性添加到您的 .hiddentoggle 选择器中：

.hiddentoggle {
  display:none; // you already had this there
  background: lightBlue;
  left: 0;
  padding: 0 10px 10px;
  position: absolute;
  top: 100%;
  z-index: 1;
}

更新：

根据您的新信息，我很好奇您为什么不想使用浮动。我也很好奇你所说的“假行”是什么意思。

无论哪种方式，如果您希望在显示 A 内容时只让 C 框向下移动，实现这一点的唯一方法是将 A 和 C 包装在一个元素中。该元素不必是浮动的，它也可以是 display:inline-block，但是无论您决定如何布局它，您都需要创建某种“列”为了获得您想要的效果。