CSS多列 - 段落分组？答案

【问题标题】：CSS multiple columns - paragraphs grouping?CSS多列 - 段落分组？
【发布时间】：2019-07-08 08:55:59
【问题描述】：

是否可以对分组段落使用 CSS 列数？

我有

<h1>Heading</h1>
<p>some paragraph of text 1</p>
<p>next paragraph of text 2</p>
<p>next paragraph of text 3</p>

p {column-count:2} 我明白了：

 Heading
 some paragraph | of text 1
 next paragraph | of text 2
 next paragraph | of text 3

我需要这个：

 Heading
 some paragraph  | next paragraph
 of text 1       | of text 3
 next paragraph 
 of text 2

有可能吗？

【问题讨论】：

你能添加你的html和css吗？
如果您不希望每个单独段落的内容分列在两列中，那么不要应用column属性到各个段落……
有了列，你会比第一个更接近你的第二个例子——但为了平衡第 2 段的列高，第 2 段中的一些可能会进入第二列
这可能会有所帮助，但这与您想要的很接近，而不是完全解决方案。 codepen.io/townivan/post/flexbox-flex-direction-column
或者使用css网格-alligator.io/css/css-grid-auto-flow或者developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/…

【解决方案1】：

首先：不要忘记用</p> 结束段落。

如果我理解正确，您不希望每个单独的段落都有两列，但您希望将段落放在两列中。您需要将column-count 放在周围元素上：

<div class="paragraphs">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

.paragraphs {
   column-count:2
}

【讨论】：