唤醒手腕 2021-10-04 12:39 采纳率: 58.3%
浏览 66
已结题

就是flex布局上竖直方向如何布局，清除缝隙

就是我采用的flex布局，想让竖直方向div盒子直接没有缝隙
div1 和 div3 的宽度是相同的，但是就是想让div3与div1在竖直方向没有间隙。
不用 margin-top: 和 tranformY，其他还有什么方便的方法调整吗

img

  • 写回答

4条回答 默认 最新

  • 神仙别闹 2021-10-04 21:17
    关注

    是要实现这种效果么？

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h2 {
            margin:0px;
        }
        .masonry {
            width: 1440px;
             margin: 20px auto;
             columns: 2;
            column-gap: 30px;
        }
        .item {
            width: 100%;
            break-inside: avoid;
            margin-bottom: 30px;
            background-color:#d2ecff;
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="masonry">
        <div class="item">
            <h2>Title div1</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?
            </p>
        </div>
        <div class="item">
            <h2>Title div2</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?
            </p>
        </div>
        <div class="item">
            <h2>Title div3</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?

            </p>
        </div>
        <div class="item">
            <h2>Title div4</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?
            </p>
        </div>
        <div class="item">
            <h2>Title div5</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
                deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
                dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
                quidem?
            </p>
        </div>
    </div>
</body>
</html>

    显示效果

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 10月12日
  • 已采纳回答 10月4日
  • 创建了问题 10月4日

悬赏问题

  • ¥20 易康econgnition精度验证
  • ¥15 线程问题判断多次进入
  • ¥15 msix packaging tool打包问题
  • ¥28 微信小程序开发页面布局没问题，真机调试的时候页面布局就乱了
  • ¥15 python的qt5界面
  • ¥15 无线电能传输系统MATLAB仿真问题
  • ¥50 如何用脚本实现输入法的热键设置
  • ¥20 我想使用一些网络协议或者部分协议也行，主要想实现类似于traceroute的一定步长内的路由拓扑功能
  • ¥30 深度学习，前后端连接
  • ¥15 孟德尔随机化结果不一致