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）的内容和（4）的另一个div放置一个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/

谢谢， Petiar。

Css Float问题，不同的高度div

3 个答案: