这是一个创建于 689 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题
如下图一样的盒子，怎么让绿色的盒子补到红色盒子的间隙处
预想效果图
效果图为手动改 div 布局做出来的。我的疑惑点在于怎么用 css 动态（响应式）实现环绕的效果，因为在渲染前我并不知道盒子的大小
第 1 条附言 · 2023-01-09 10:38:35 +08:00
是我描述得不太清楚抱歉各位！我再举个例子： 其实就是从：
如何不改代码的情况下兼容这种情况：
 |
1
loading 2023-01-08 16:49:40 +08:00
关键字：
css 瀑布流 |
 |
2
3282361 2023-01-08 17:00:03 +08:00
如果是用在生产环境（对兼容性有要求），以从左往右从上到下为例，可以试试这两个思路：
1. 所有盒子都使用绝对定位计算位置，就是每个盒子的 left, top 都动态设置 2. 按列来处理，也就是每一列自行从上往下堆叠，自然也就补齐了，在外部盒子中再从左往右排列每一列 这种布局的实现方法很多，细节差异导致实现区别也很大，建议自行搜索「 Masonry Layout 」，找到适合自己的方式 |
 |
3
cbdyzj 2023-01-08 17:12:40 +08:00
|
 |
5
2Broear 2023-01-09 09:18:19 +08:00
flex,grid
|
 |
6
theprimone 2023-01-09 09:47:49 +08:00
|
 |
7
WuHao1477 OP 是我描述得不太清楚抱歉各位！我再举个例子：
其实就是从：    如何不改代码的情况下兼容这种情况：  |
 |
8
Rache1 2023-01-09 16:19:56 +08:00
这图看的我眼睛要瞎了
|
Select Language