CSS浮动问题，不同高度的div

Question

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

例如：！

|||||||  ||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 动态浮动任意数量的 div，并且所有边框相互接触，没有这种下推效果，

有什么方法可以做到吗？ 我尝试了 jQuery Masonry 插件，但也能弄清楚:(..

非常需要帮助

Answer 1

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

我想这取决于你想要做什么和想要实现什么。您可能还想让所有 div 具有相同的高度并具有背景或边框，以便它们浮动而不会出现视觉空白。 （但是如果里面的内容没有填满div，就会有空间。

另外，你可能想浮动1个div，然后在其内部浮动（1），（2）和（3），然后浮动(4) 分开......但这实际上取决于你想做什么。

Answer 2

看看这个。这可能会解决您的问题：

<div id="container" style="height:300px;width:308px;background:#ddd;border:1px solid red;float:right"">
  <div class="box" style="height:175px;width:100px;background:#CF9;border:1px solid #C0C;float:right">3</div>
  <div class="box" style="height:150px;width:100px;background:orange;border:1px solid #404040;float:right">2</div>
  <div class="box" style="height:300px;width:100px;background:green;border:1px solid yellow;float:left">1</div>
  <div class="box" style="height:145px;width:100px;background:blue;border:1px solid #F03;float:right">4</div>
</div>

这里我使用颜色和边框进行视觉辅助。

Answer 3

我写了一个简单的 jQuery 脚本来实现这个目的。它甚至适用于可变宽度容器/页面，因此您不需要将行放入单独的容器中。让我们看看并让我知道这是否是您所需要的：

http://demo.petiar.sk/smartfloat/

谢谢，
皮蒂亚尔。