V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
WuHao1477
V2EX  ›  问与答

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

  •  
  •   WuHao1477 · 2023-01-08 16:35:49 +08:00 · 1052 次点击
    这是一个创建于 446 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题

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

    5e694016c66ec13d653ba112326509b1c5289266.png

    预想效果图

    4eb6fa6a8e9593d05ce44ac9e49b29fcd3b4e830.png

    	效果图为手动改 div 布局做出来的。我的疑惑点在于怎么用 css 动态(响应式)实现环绕的效果,因为在渲染前我并不知道盒子的大小
    
    第 1 条附言  ·  2023-01-09 10:38:35 +08:00

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

    1.png

    2.png

    3.png

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

    4.png

    8 条回复    2023-01-09 16:19:56 +08:00
    loading
        1
    loading  
       2023-01-08 16:49:40 +08:00
    关键字:
    css 瀑布流
    3282361
        2
    3282361  
       2023-01-08 17:00:03 +08:00
    如果是用在生产环境(对兼容性有要求),以从左往右从上到下为例,可以试试这两个思路:

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

    这种布局的实现方法很多,细节差异导致实现区别也很大,建议自行搜索「 Masonry Layout 」,找到适合自己的方式
    cbdyzj
        3
    cbdyzj  
       2023-01-08 17:12:40 +08:00
    随便写一个实现:
    https://codepen.io/cbdyzj/pen/jOpyBRO

    实际要根据具体场景来选择布局
    andyxic
        4
    andyxic  
       2023-01-08 20:57:46 +08:00
    @cbdyzj 真牛逼!!!
    2Broear
        5
    2Broear  
       2023-01-09 09:18:19 +08:00
    flex,grid
    WuHao1477
        7
    WuHao1477  
    OP
       2023-01-09 10:37:49 +08:00
    是我描述得不太清楚抱歉各位!我再举个例子:
    其实就是从:

    ![1.png]( https://s1.locimg.com/2023/01/09/cd19920d43474.png)

    ![2.png]( https://s1.locimg.com/2023/01/09/50ce93db51f2d.png)

    ![3.png]( https://s1.locimg.com/2023/01/09/1a47248de1bf2.png)

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

    ![4.png]( https://s1.locimg.com/2023/01/09/78f0a157d62ed.png)
    Rache1
        8
    Rache1  
       2023-01-09 16:19:56 +08:00
    这图看的我眼睛要瞎了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2450 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:49 · PVG 23:49 · LAX 08:49 · JFK 11:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.