Question

我有几个div，我用这段代码将它们排列在3列中：

display: inline-block; width: 33%;

每个div都有一个按钮。如果单击该按钮，则会显示div中隐藏的段落。为此，我使用了.toggle（）函数（jquery）和这个css代码：

p {
   display: none;
   width: 100%;
   height: 4em; 
   overflow-y: scroll; 
   overflow-x: none; 
   border: 1px solid black; 
}

我的问题是：当我点击按钮并显示div的段落时，另一个div的位置也会改变（它们都向下移动，实际上搞乱了布局）。

我想要的是：段落只应该按下同一列中的div。 div中其他2列的位置应该保持不变。

有人可以帮我吗？

Answer 1

我认为你需要像that这样的东西。你应该用另一个用你的3段div包围，以免弄乱布局。

<div>
  <div class="paragraph" id="paragraph1">
    <p>
      1Lorem ipsum dolor sit amet,
    </p>
  </div>
  <div class="paragraph" id="paragraph2">
    <p>
      2Lorem ipsum dolor sit amet, 
    </p>
  </div>
  <div class="paragraph" id="paragraph3">
    <p>
      3Lorem ipsum dolor sit amet, 
    </p>
  </div>
</div>

当隐藏元素变得可见时，列布局混乱

1 个答案: