删除 CSS 列上的额外底部填充

Question

我有一个 CSS 列布局。

然而，我发现底部有一个不必要的间隙（由屏幕截图中的粉红色箭头表示）。

如果我从 CSS 中删除display: inline-block ，这个差距就会消失，但随后一些<section>元素会分成两部分。 我也尝试过使用break-inside: avoid ，但它似乎什么也没做。

有解决办法吗？

<div class="feed-index">
    <div class="feed">
        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>

        <section>
            Lorem ipsum dolor sit amet
        </section>
    </div>
</div>

.feed-index .feed {
    column-count: 3;
    column-gap: 40px;
}

.feed-index .feed > section {
    display: inline-block;
    margin-bottom: 50px;
    overflow: hidden;
}

Answer 1

添加vertical-align:top; 到您的 CSS 获取.feed-index.feed > section

原因是你的overflow: hidden; 实际上改变了块。 在此处查看更多信息： 为什么 x-overflow:hidden 会导致下方有额外空间？