在 HTML 中的两列之间自动排列文本答案

【问题标题】：Automatically flow text between two columns in HTML在 HTML 中的两列之间自动排列文本
【发布时间】：2021-08-10 08:52:35
【问题描述】：

我正在编写一个程序来缩短广播列表 HTML 文件 - 我的妻子视力有限，所以我们将列表的大文本版本作为 HTML 文件，但它包含许多不感兴趣的电台，所以我写了一个删除他们列表的小程序 - 否则打印出来大约需要 100 页！一个电台只有节目标题，所以它会节省纸张以在两列中显示该列表。因此，给定一个文本块，例如：

<p>06.00 Joins BBC News</p>
<p>06.06 Weekend</p>
<p>07.00 Joins BBC News</p>
<p>07.06 Weekend</p>
<p>08.00 Joins BBC News</p>
<p>08.06 Weekend</p>
<p>08.30 BBC News Summary</p>
<p>08.32 The Conversation</p>
<p>09.00 Joins BBC News</p>
<p>09.06 BBC OS Conversations</p>
<p>09.30 BBC News Summary</p>
<p>09.32 The Lazarus Heist</p>
<p>09.50 Over to You</p>

我可以添加一个简单的前缀/后缀来使这个显示在两列中吗？如果可能的话，我希望文本自动平衡。

【问题讨论】：

改用表格？

标签： html css multiple-columns

【解决方案1】：

使用column-count

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

div {
  column-count: 2;
}

<div>
  <p>06.00 Joins BBC News</p>
  <p>06.06 Weekend</p>
  <p>07.00 Joins BBC News</p>
  <p>07.06 Weekend</p>
  <p>08.00 Joins BBC News</p>
  <p>08.06 Weekend</p>
  <p>08.30 BBC News Summary</p>
  <p>08.32 The Conversation</p>
  <p>09.00 Joins BBC News</p>
  <p>09.06 BBC OS Conversations</p>
  <p>09.30 BBC News Summary</p>
  <p>09.32 The Lazarus Heist</p>
  <p>09.50 Over to You</p>
</div>

【讨论】：

【解决方案2】：

你可以试试下面的代码。

<!DOCTYPE html>
<html>

<head>
    <title>Auto Column in HTML</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        .col {
            display: grid;
            grid-template-areas: "a a";
            grid-gap:5px;
        }
    </style>
</head>

<body>
    <div class="col">
        <p>06.00 Joins BBC News</p>
        <p>06.06 Weekend</p>
        <p>07.00 Joins BBC News</p>
        <p>07.06 Weekend</p>
        <p>08.00 Joins BBC News</p>
        <p>08.06 Weekend</p>
        <p>08.30 BBC News Summary</p>
        <p>08.32 The Conversation</p>
        <p>09.00 Joins BBC News</p>
        <p>09.06 BBC OS Conversations</p>
        <p>09.30 BBC News Summary</p>
        <p>09.32 The Lazarus Heist</p>
        <p>09.50 Over to You</p>
    </div>
</body>

</html>

【讨论】：

感谢两位。列数解决方案最适合我 - 文本向下一列，然后向下一列。