如何在 CSS 中制作这种布局？答案

【问题标题】：How to make this layout in CSS?如何在 CSS 中制作这种布局？
【发布时间】：2013-06-21 05:30:19
【问题描述】：

This layout

我什至不知道如何命名它。 “流体”或“液体”列似乎指的是简单的动态高度。我做了这个，但有两个问题：可以用原始 HTML5/CSS3 来做吗？是否可以使其适用于 3、4、...、n 列？！

【问题讨论】：

是的。可以使用原始 HTML5/CSS3 来实现。
你可能会发现这样的东西很有帮助 - mcpants.github.io/jquery.shapeshift

标签： css layout html

【解决方案1】：

我了解您想要实现类似this
您可以使用Masonry - 这是纯 JavaScript 并且还支持 jQuery
或 Isotope 这是一个 jQuery 插件。
这些插件的作者建议使用Isotope。

【讨论】：

非常感谢！这就是我需要的。只是出于好奇，是否有可能使用纯 CSS 获得相同的效果（当然，没有动画）？
不，仅使用 CSS 是不可能的，如果您看到 Layout modes:，它会在此处进行解释。试试demo，使用选项调整浏览器的大小 - showall, original, mansory 你会发现空白，这些空白实际上已被使用 jQuery 的布局模式删除。

【解决方案2】：

这完全取决于您将如何设置每个阅读框的高度。如果它依赖于内容，那么它只是一个具有流动宽度的 2 列布局。如果您要保持高宽比，那么您将需要使用 js 进行数学运算并保持高度或使用 img 作为背景 width:100%; height:auto; display:block 并将内容 position:absolute: 放置在其顶部。

【讨论】：