两栏div问题

Question

我遇到了小段落的问题。正如你在图片中看到的那样，我希望文本在左列上继续向下流动，而不是段落跳到右边。我相信这与列“填充”的方式有关，但就我所见，Chrome不支持列填充属性。我有哪些替代方案？

相关CSS：

#display {
    max-width: 120ch;
    min-height: 100%;
    column-count: 2;
    -webkit-column-width: 50ch;
    -webkit-column-gap: 3em;
    padding: 1em;
}
p,
.texto {
    margin: 3em 0 0 0;
    font-size: 1.25em;
    line-height: 1.25em;
    color: rgba(0, 0, 0, 0.8);
}

相关HTML：

<div id="display">
    <h4>Party Disbanded</h4>
    <h1>Cr&oacute;nica</h1>
    <p>14 de Goch del 1308 DGGP</p>
    <p class="texto">Text here.</p>
</div>

Answer 1

将您的html，body设置为width: 100%; height 100%;，将#display设置为height: 100%;。现在使它工作的原因是这些元素的HTML结构。

这也将确保您的页面扩展到视口的整个宽度和高度。如果您感到好奇，网上有很多关于此的资料。

您可能会或可能不会发现任何问题，因为您需要考虑您网站上发生的其他问题，但是现在应该这样做。

如果您还有其他问题，请在下面的评论中提问。