带有空行的两列文本

Question

如果我需要允许空行作为间距，我怎样才能将文本均匀地分布在两列中？

我已经走到这一步了，但是如果它碰巧落在那里，这会在第一列的顶部留下空行（我试图重现，但取决于你的屏幕宽度）。

所以这很接近，但还不是很完美：

p {
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  display: block;
}

<p>
  This line is just stopped with a br.<br>
  This line is very long.............. ........... ............ ....... ....... ....
  <br>
  <br> 
  And I want a blank line before this one.
</p>

Answer 1

我不太确定您希望最终结果是什么样子，但我敢打赌 table 效果最好。

<table>
  <tr>
    <td>This line is just stopped with a br.</td>
    <td></td>
  </tr>
  <tr>
    <td>This line is very long.............. .... ....... ....... ....</td>
    <td>And I want a blank line before this one.</td>
  </tr>
</tabel>

Answer 2

像这样：

.container {
  column-count: 2;
  width:70%;
  margin: 0 auto;
  position:relative;
}

.left {
  width:100%;
  height:100%;
  display:inline-block;
}

.right {
  width:100%;
  display:inline-block;
}

.top {
  width:100%;
}

.middle {
  width:100%;
}

.bottom {
  width:100%;
  padding-top:1rem;
}

<div class="container">
  <div class="left">
    <div class="top">Top left Top left Top left</div>
    <div class="middle">Middle left very long... Middle left very long... Middle left very long... Middle left very long... Middle left very long... Middle left very long... Middle left very long... Middle left very long... Middle left very long... </div>
    <div class="bottom">Bottom left Bottom left</div>
  </div>
  <div class="right">
    <div class="top">Top right Top right Top right</div>
    <div class="middle">Middle right very long... Middle right very long... Middle right very long... Middle right very long... Middle right very long... Middle right very long... Middle right very long... Middle right very long... Middle right very long... </div>
    <div class="bottom">Bottom right Bottom right Bottom right </div>
  </div>
</div>

Answer 3

如果您使用 p 标签而不是 br，您可以将 class 添加到空行并对其应用 break-before: avoid;。这样，在具有 class:

的任何元素之前都不会出现分栏符（受到此设置的影响以及分页符）

div {
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 20px;
  column-gap: 20px;
  display: block;
}

p:first-of-type {
  margin-top: 0;
}

.empty {
  break-before: avoid;
}

<div>
  <p>This line is just stopped with a br.</p>
  <p>This line is very long.  This line is very long. </p>
  <p class="empty"></p>
  <p class="empty"></p>
  <p>And I want a blank line before this one.</p>
</div>

带有空行的两列文本

Text in two columns with empty lines

html

css

multiple-columns