关于前端 CSS 的环绕问题有大佬会吗

[WuHao1477]

问题

如下图一样的盒子，怎么让绿色的盒子补到红色盒子的间隙处

预想效果图

	效果图为手动改 div 布局做出来的。我的疑惑点在于怎么用 css 动态（响应式）实现环绕的效果，因为在渲染前我并不知道盒子的大小

[loading]

关键字：
css 瀑布流

[3282361]

如果是用在生产环境（对兼容性有要求），以从左往右从上到下为例，可以试试这两个思路：

1. 所有盒子都使用绝对定位计算位置，就是每个盒子的 left, top 都动态设置
2. 按列来处理，也就是每一列自行从上往下堆叠，自然也就补齐了，在外部盒子中再从左往右排列每一列

这种布局的实现方法很多，细节差异导致实现区别也很大，建议自行搜索「 Masonry Layout 」，找到适合自己的方式

[cbdyzj]

随便写一个实现：
https://codepen.io/cbdyzj/pen/jOpyBRO

实际要根据具体场景来选择布局

[andyxic]

@cbdyzj 真牛逼！！！

[2Broear]

flex,grid

[theprimone]

我猜楼主是想实现这样的效果：
https://tailwindcss.com/docs/columns#adding-based-on-column-count

相关属性参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/columns
https://www.w3schools.com/css/css3_multiple_columns.asp

[WuHao1477]

是我描述得不太清楚抱歉各位！我再举个例子：
其实就是从：




如何不改代码的情况下兼容这种情况：


[Rache1]

这图看的我眼睛要瞎了