“更好”漂浮在CSS

Question

我正在试验CSS和float属性。我有这样的“网站”，用了很多的div对齐80px电网和float: left：

是否有CSS的方式，使它看起来像这样 - 这样的元素可以使用上面这些空白？

没有JavaScript，如果可能的话。

谢谢，马丁。

Answer 1

对于水平和垂直平铺动态内容，CSS的选项是：

• float:left，正如你已经看到的，只提供有限的横向平铺。
• display:inline-block给出与float:left不同的结果，但没有平铺。
• CSS multi-column layout尚未完全定义。它支持垂直流入隐式列，但可能不是以平铺的方式。
• flexible box layout还没有得到很好的支持。它支持一种可能不符合平铺的水平或垂直流，尽管它感觉像是朝着正确方向迈出的一步。

简而言之，即使尚未完全定义的CSS标准似乎也不支持这一点;所以它可能还有很长的路要走。最简单的回退选项是使用jQuery插件。

除了Masonry（如@Billy Moat建议），另一对jQuery插件是Isotope和Tiles Gallery。似乎最经常提到砌体。

Answer 2

不，这不能在CSS中完成。最好的方法是使用一个名为masonry的JavaScript项目，我很害怕。

http://masonry.desandro.com/

Answer 3

让说的px数量上去填补1块的空间50px。 margin-top: -50px;

这并不神奇，对每个人来说这只是一些手工操作。如果你的内容是动态的，这可能无法运行，或者需要js来计算是否需要增加或减少多行和所有内容。

Answer 4

这可以完成，但正如CHE所说，如果您的内容是动态的，这将会以最糟糕的方式出错。

但是，如果它是一个静态网站，这当然可以完成。

要解决这个问题，请考虑块&组并对齐它们，在每个块内部重新对齐所有块。