(私はスタックでこのような他のいくつかの質問、特に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;
}