浮动DIV额外空间填充

Question

我有这些漂浮的DIV盒子，效果很好。 ：）

但是当文本扩展得更多时，我遇到了这个浮动问题。

如何填补那些破坏我设计的丑陋空间？

Answer 1

这是因为浮动元素不属于普通HTML文档流，并且当某些元素比其兄弟元素高时，默认为此行为。

解决此问题的一种方法是使用固定高度元素。如果它们都具有相同的高度，则不会发生此问题。然而，这并不总是实用的，特别是对于动态内容。

另一种解决方案是使用JavaScript。看看Masonry jQuery plugin;它可以做你需要的。

Answer 2

我会使用不依赖于jQuery的Vanilla Masonry插件; http://vanilla-masonry.desandro.com/

Answer 3

非JS解决方案是在这些框上使用display: inline-block; vertical-align: top;而不是float: left。这将使他们所有人并排排列并且很好地排队，尽管在他们旁边有一个更高的盒子下面会有一些小间隙。 inline-block至少会阻止你看到的浮动陷阱。