CSS - 使用浮动div自动填充空白空间

我有多个div（图像）与浮法：左;财产和我想知道为什么有一些空的空间，为什么浮动divs没有填补空白。

非常感谢您的时间和帮助。

更新：我现在使用jQuery同位素，但仍然有差距...任何想法？

2012-08-04 Gab

提供一些源代码。 – Amberlamps 2012-08-04 23:10:54

你必须在gablabelle.com看到布局才能理解。 – Gab 2012-08-04 23:16:07

在你的重复（淘气！）问题中看到我的评论，也许这样你就可以得到你想要的东西，尽管没有石工或同位素。 – Systembolaget 2012-08-05 11:37:28

这只是如何浮动的作品。那些差距在那里，因为元素在另一个突破到新线路之后浮动。它不填写上面的空白。

如果你想要一个不均匀的网格效果，那么你需要使用JavaScript解决方案，你设置的绝对位置。我建议masonry plugin，我认为主页上的前后示例显示了您遇到的问题以及您需要的解决方案。

2012-08-04 23:18:16

该死......好吧我会用jQuery同位素插件，但是我希望它能在没有javascript的情况下很好地降级。 – Gab 2012-08-04 23:22:04

是的，我建议砌体，因为它是免费的，但我现在也在使用同位素进行项目。不幸的是，目前没有使用JS的解决方案。 – 2012-08-04 23:24:36

我仍然与同位素有差距。一探究竟。 – Gab 2012-08-04 23:25:39

这是造成差距：

article.post { 
    margin: 0 0 30px 30px; 
}

2012-08-04 23:13:08 Amberlamps

没有这些利润率。我想要的是，我正在拍摄270x270的空白点。 – Gab 2012-08-04 23:15:07

@Gab：通过将每个浮动值设置为左侧，您无法获得所需的值。以“Karin et les feuilles”并手动设置其浮动为正确。下面的div将完全适合。 – Amberlamps 2012-08-04 23:21:25

看来你正在寻找一种方式来填充页面上的所有广场。这不可能简单地通过CSS来实现。 '向左飘浮;'只是简单地填充页面中的空间，逐个图像，而不是考虑它们如何融合在一起。

把所有的东西放在一起，让它们坐在一起，像一个拼图一样不容易。这实际上是一个相当复杂的问题，它与背包问题（http://en.wikipedia.org/wiki/Knapsack_problem）和包装问题（http://en.wikipedia.org/wiki/Packing_problem）有关。

为了解决这个问题，我确信会有jQuery或JavaScript（甚至PHP）库可供使用。或者，您可以手动订购照片，以便它们以整齐的方式整合在一起。

祝你好运！

2012-08-04 23:20:26

好吧我猜我只是使用jQuery同位素插件，但我希望它没有任何JavaScript就会很好地降级。 – Gab 2012-08-04 23:22:27

Isotope插件的体面实现应该很好地处理这个问题。在旁注中，您正在设计的网站看起来非常棒！ – 2012-08-04 23:26:08

同位素现在开启。但我仍然有差距！感谢这将是我的新组合。前一个是在visualise.ca。 ;-) – Gab 2012-08-04 23:29:31

回答