如何在CSS中进行这种布局？

This layout 如何在CSS中进行这种布局？

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

来源

2013-06-20 Erik Escobedo

是的。可以用原始HTML5/CSS3来完成。 – Ani

您可能会发现这样的帮助 - http://mcpants.github.io/jquery.shapeshift/ – CodeMoose

我明白，你想实现像this
可以使用Masonry - 这是纯JavaScript &还支持jQuery的
或 Isotope这是一个jQuery插件。
这些插件的作者建议使用Isotope。

来源

2013-06-20 21:30:19 VenomVendor

非常感谢！这是我需要的。只是好奇心，是否有可能获得相同的效果（当然没有动画）与裸CSS？ –

不，如果你看到[布局模式：]（http://isotope.metafizzy.co/docs/introduction.html），那么只用CSS是不可能的。试一下[demo]（http://isotope.metafizzy.co/），用选项调整浏览器的大小 - “showall，original，mansory”，你会发现空隙，这些空隙实际上被使用jQuery的布局模式所去除。 – VenomVendor

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

来源

2013-06-20 21:21:13

如何在CSS中进行这种布局？

回答

相关问题