包含列的 div 太高答案

【问题标题】：Div containing columns is too tall包含列的 div 太高
【发布时间】：2021-09-29 02:18:17
【问题描述】：

（我在堆栈上查看了其他一些类似的问题，尤其是Extra space at the bottom of CSS columns，但我看不到提问者在他提出的小提琴中遇到的问题，并且尝试该解决方案无论如何都不起作用。 )

无论如何，我在 div 中的列下方添加了额外的空间，并应用了列宽。 Here's a link 示例。我的问题是任何列下方的额外蓝色空间。当我删除一个或另一个时，它似乎解决了。我可以让容器 div 缩小以仅使用所需的空间吗？

HTML：

<div class="columns">
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
            <li>checked_out</li>
            <li>checked_out</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>checkouts:</b>
        <ul>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>books:</b>
        <ul>
            <li>ttttttytytytytytytytytytytytytytytytytytytytytytytytytyty</li>
            <li>author_id</li>
        </ul>
    </div>
</div>

CSS：

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}    

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
}

【问题讨论】：

标签： css css-multicolumn-layout

【解决方案1】：

如果你说的是蓝色空间，那是因为UL。

只需将margin:0 用于 UL 标记

.columns ul {
    margin:0;
}

http://jsfiddle.net/EAqE9/1/

【讨论】：

WAT？为什么在地球上......好的，谢谢。这样做会折叠 div 之间的垂直间距，并在块上方或下方添加边距会使它们在顶部无法正确对齐；有什么提示吗？
为 .column_div 添加一些填充

【解决方案2】：

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
    margin-bottom: 10px;
}

.column_div:nth-child(3) {
    margin-bottom: 0;
}

.columns ul {
    margin:0;
}

一个解决垂直间距和列之间缺少边距的修复

【讨论】：