(我在堆栈上查看了类似这样的其他一些问题,特别是 CSS 列底部的额外空间,但我看不到提问者在他提出的小提琴中遇到的问题,并且尝试该解决方案没有用无论如何。)
无论如何,我在应用列宽的 div 中的列下方添加了额外的空间。这是示例的链接。我的问题是任何列下方的额外蓝色空间。当我删除一个或另一个时,它似乎解决了。我可以让容器 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;
}