html - “更好”漂浮在 CSS 中

Question

我正在试验 CSS 和 float 属性。我有这个“网站”，有很多 div 与 80px 网格对齐，并且float: left：

CSS中有没有办法让它看起来像这样 - 所以元素可以使用它们上方的空白空间？

没有 JavaScript，如果可能的话。

谢谢，马丁。

Answer 1

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

http://masonry.desandro.com/

Answer 2

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

• float:left，正如您已经看到的，仅提供有限的水平平铺。
• display:inline-block给出与 不同的结果float:left，但没有平铺。
• CSS 多列布局尚未完全定义。它支持垂直流到隐式列，但可能不是以符合平铺的方式。
• 灵活的盒子布局还没有得到很好的支持。它支持一种可能不符合平铺条件的水平或垂直流，尽管它感觉像是朝着正确方向迈出的一步。

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

除了Masonry（正如@Billy Moat 建议的那样），另外两个 jQuery 插件是Isotope和Tiles Gallery。砌体似乎最常被提及。

Answer 3

假设px要填充 1 个块的空间的数量是50px。margin-top: -50px;

这不是魔术，只是为每个人做一点手动。如果您的内容是动态的，这将无法正常工作，或者需要 js 来计算我们是否需要在多行和所有内容上上升。

Answer 4

这是可以做到的，但正如 CHE 所说，如果您的内容是动态的，那么这将以最糟糕的方式出错。

但是，如果它是一个静态站点，则可以肯定地做到这一点。

为了解决这个问题，在块和组中思考并对齐它们，在每个块内重新对齐所有块。