唤醒手腕 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日

悬赏问题

  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值