Question

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

当您点击显示/隐藏链接时，您会看到隐藏文字出现。我想解决的行为是如何推送第一行和第二行内容，而不仅仅是它所在的父容器。

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

A B（＆lt; ---这是一个虚假行，因为它没有被编程为一行）
C D

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

A B
H _
C D

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

A B
H D
ç

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

是否可以使用此切换脚本功能，以便它只影响正在使用它的父容器？

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，但是无论你决定将它放在外面，你都需要制作某种“列”才能获得效果正在寻找。

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

1 个答案: