jquery - Css Float问题，不同高度的div

Question

我想知道是否有办法让许多不同高度的div彼此相邻 float 而没有下推效果，

例如:!

||||||| ||2||| ||||||||
||||||| |||||||| ||||3||
||1|| ||||||||
||||||| ?||||||||
||||||| ||4||||
|||||||||

问题是 div 2 下的空白，这是因为 div3 比 div2 高，所以它 按下 div4 留下丑陋的空白

代码:

<div class=container>

<div class=box>1</div>
<div class=box>2</div>
<div class=box>3</div>
<div class=box>4</div>

</div>

我正在尝试使 div .container 动态 float 任意数量的 div，并且所有边框都相互接触而没有这种下推效果，

有什么办法吗？ 我尝试了 jQuery Masonry 插件，但也能弄明白:(..

非常需要帮助

Answer 1

这是 float 元素的 CSS 标准行为。如果你不想要 (2) 和 (4) 之间的空间，那么你可能需要 float (2)，然后为 (2) 的内容放置一个 div，为 (4) 放置另一个 div，这样它们就是“在一起”(垂直)。

我想这取决于您想做什么和实现什么。您可能还想使所有 div 具有相同的高度并带有背景或边框，以便它们在没有视觉空白空间的情况下 float 。 (但如果里面的内容没有填满 div，就会有空间。

此外，您可能希望 float 1 个 div，然后在其中 float (1)、(2) 和 (3)，然后分别 float (4)...但这实际上取决于您想要什么做。