css - 如何仅使用 css 创建 masonry 布局?

标签 css masonry

我只想使用 css 创建 masonry 布局,我阅读了互联网上的所有教程,但他们使用列属性来划分布局,这里的问题是布局将像这样显示(1,2,3.. .是一个元素)。

1|3|5
2|4|6

我希望我的布局必须是:

1|2|3
4|5|6

我只想使用 css。如果您有解决此问题的任何解决方案或想法,请告诉我。

最佳答案

你可以使用 flexbox。参见 codepen例如,complete guide to flex box了解更多。

为了保持布局水平,根据您的喜好调整flex-direction

关于css - 如何仅使用 css 创建 masonry 布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37385020/

相关文章:

css - 立即 1st tr 2nd td 不工作

javascript - 我有 3 个 div,每个都有自己的主题,现在我想为每个 div 打开它的模式

javascript - 隐藏一个元素和它的空间并通知应用程序以便它使用 React 显示其他内容

html - 在没有互联网的情况下使用超棒的字体图标

javascript - 如何修复 masonry 插件产生的奇怪布局

angular - 如何整合Masonry + Infinite Scroll + Angular

jquery - 瓷砖的 Safari float 或尺寸问题

instagram 嵌入加载后的 Javascript 回调?

css - 输入文本时表单切换颜色(CSS)

html - 如何增加 v-if 显示的值?