css - 两列div问题

Question

我遇到了小段落的问题。正如您在图片中看到的那样，我希望文本在左栏中继续向下流动，但段落会跳到右侧。我相信这与如何“填充”列有关，但就我所见，Chrome 不支持 column-fill 属性。我有什么选择？

相关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 结构。

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

您可能会或可能不会发现更多问题，因为您需要考虑您的网站上还发生了什么，但现在应该可以完成这项工作。

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