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

Question

我在想是否有办法将高度不同的多个div浮动在一起，而不会出现推下效果，例如： ||||||| ||2||| |||||||| ||||||| |||||||| ||||3|| ||1|| |||||||| ||||||| ?|||||||| ||||||| ||4||||

问题是第2个div下面的空白，这是因为第3个div比第2个高，所以它推下了第4个div，留下了难看的空白。

代码：

<div class=container>

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

</div>

我正在尝试使

内部的任意数量的

元素动态浮动，并且所有边框互相接触而不会出现下推效果，

有没有办法做到这一点？ 我尝试了jQuery Masonry插件，但是也无法解决 :(..

非常感谢您的帮助

- Momen Zalabany

---

使用jQuery Masonry插件肯定是可行的。你尝试过什么并且没有成功呢？ - ifaour

你需要找到jQuery Masonry，看看我的这个高度相关的答案：See this highly relevant answer of mine. - thirtydot

只有我看到黑色条之间的绿色吗？ - acme

Answer 1

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

<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>

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

- thecodeparadox

---

非常感谢您 :). 浮动到另一边很好，但唯一的问题是我不想手动编辑div。<br>因为我动态生成div。 - Momen Zalabany

Answer 2

这是CSS浮动元素的标准行为。如果您不想要(2)和(4)之间的空格，那么您可能需要将(2)浮动，然后放置一个div用于(2)的内容和另一个div用于(4)，以便它们在垂直方向上“在一起”。

我猜这取决于您想做什么和实现什么目标。您可能还想使用背景或边框使所有div具有相同的高度，以便它们在没有视觉空白的情况下浮动。(但如果内部内容没有填满div，则会有空格。

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

- nonopolarity

---

我想要的是能够将任意数量的盒子推入我的页面主div中，<br>我正在为我的新网站创建一个小型CMS，并希望它获取此页面中存储的所有盒子并将它们包装在<div id=content>中。<br>在侧边栏中这样做很容易，因为它的1列包含所有的盒子，但是div = content的问题是有些页面有2个盒子= 2列，而其他页面有20个盒子（每个盒子20％宽度），这给了我5列X 4行的盒子，高度各不相同但宽度相同。 - Momen Zalabany

Answer 3

我写了一个简单的jQuery脚本，可以解决这个问题。它甚至适用于可变宽度的容器/页面，因此您不需要将行包含在单独的容器中。让我们看一下，如果这正是您所需要的，请告诉我：

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

谢谢，Petiar。

- petiar