如何在CSS中进行此布局？

Question

This layout

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

Answer 1

我知道您希望实现this之类的内容 你可以使用Masonry - 这是纯粹的JavaScript＆amp;也支持jQuery
或 Isotope这是一个jQuery插件。
这些插件的作者建议使用Isotope。

Answer 2

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