相关疑难解决方法(0)

仅CSS的砌体布局

我需要实现一个相当普遍的磨坊砌体布局.但是,出于多种原因,我不想使用JavaScript来执行此操作.

多列不同高度的矩形网格.

参数:

  • 所有元素都具有相同的宽度
  • 元素的高度无法在服务器端计算(图像加上各种文本量)
  • 如果必须的话,我可以使用固定数量的列

有这一个简单的解决方案,在现代浏览器,工作column-count性质.

该解决方案的问题是元素按列排序:

从最左上方的框开始,它们的编号为1到4,下一列的最上面的框是5,依此类推.

虽然我需要按行排序元素,至少大约:

从最左上方的框开始,它们的编号为1到6,但由于框5是最短的,所以它下方的框是7,因为它的外观比最左边的下一个框高.

我试过的方法不起作用:

现在我可以更改服务器端渲染并重新排序项目数除以列数的项目,但这很复杂,容易出错(基于浏览器决定将项目列表拆分成列的方式),所以我想要尽可能避免它.

是否有一些新奇的flexbox魔法可以实现这一目标?

html css css3 flexbox css-grid

101
推荐指数
3
解决办法
2万
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1

flexbox ×1

html ×1