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

就是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条)

报告相同问题？

  • 前端知识点汇总
    2022-07-13 08:36
    Meteor.792的博客 背景图片的位置:background-position 写法一: 直接写px数值x方向: 正值右,负值左y方向: 正值下,负值上 写法2: 使用方位单词x方向: left, center, righty方向: top, center, bottom 写法三: 使用百分比x方向的百分比:...
  • CSS——前端笔记
    2024-04-21 14:30
    hmb↑的博客 css前端笔记
  • 《前端》css总结（下）
    2022-11-24 12:57
    孙同学要努力的博客 flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。我们使用display属性设置成 ...flex有两个轴，一个主轴，一个是交叉轴，默认的主轴是水平方向的，竖直方向的是交叉轴。
  • 从原型图到成品：步步深入CSS布局
    2020-02-27 00:00
    程序员小乐的博客 至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。 在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。（至少在你遇见 position: absolute ...
  • 前端(HTML+CSS) 基础知识点整理
    2022-10-18 16:53
    呆个子的博客 设置clear:both 单伪元素清除 双伪元素清除 Overflow：auto/hidden 二十七、 定位position 相对定位 relative 相对于原始位置发生偏移，没有脱离标准文档流，之前位置依然存在 2. 绝对定位absolute 相对于浏览器的...
  • 从原型图到成品:步步深入CSS布局
    2020-02-12 08:41
    web前端开发V的博客 至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。 在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。 （至少在你遇见 position: absolute...
  • 从原型图到成品：步步深入 CSS 布局
    2019-10-23 08:42
    web前端开发V的博客 至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。 在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。 （至少在你遇见 position: absolute...
  • 原型图到成品：步步深入 CSS 布局
    2019-05-30 08:42
    web前端开发V的博客 至少是在英文界面的布局中，文档流的方向是从左到右、从上到下的，因此，每个元素都 “依赖” 其左侧和上方的元素。 在 CSS 中，每个元素的定位都受到其左侧和上方的元素的影响。（至少在你遇见 position: absolute ...
  • [译] 从原型图到成品：步步深入 CSS 布局
    2019-05-27 10:00
    weixin_33835690的博客 原文地址：Implementing a Mockup: CSS Layout Step by Step 原文作者：Dave Ceddia 译文出自：掘金翻译...对很多人来说，创建布局是前端开发领域中最难啃的骨头之一。 你肯定经历过耗费数个小时，换着花样地尝试...
  • css 商城 两列_前端 css 下 - 谢佩琪
    2020-10-21 22:59
    weixin_39665302的博客 11：浮动及应用1：如何把盒子放在合适的位置css3的定位机制有3种：普通流，浮动，定位2：文档流一个网页内标签元素正常的从上到下，或从左到右排列你的意思3：浮动1：浮动是指浮动属性的元素会脱离普通控制流的控制...
  • 没有解决我的问题, 去提问

问题事件

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