CSS 多列 - 段落分组?

标签 css multiple-columns

是否可以对分组段落使用 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

这可能吗?

https://codepen.io/kelv/pen/zVmePY - 这就是我所拥有的。

https://i.ibb.co/B6rm66C/multiple-columns.png - 这就是我需要的。

最佳答案

首先:不要忘记用 </p> 结束段落.

如果我对您的理解正确,您不需要每个单独的段落都有两列,但您想将段落放在两列中。你需要把 column-count在周围的元素上:

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

.paragraphs {
   column-count:2
}

https://codepen.io/anon/pen/ydRwYy

关于CSS 多列 - 段落分组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56931456/

相关文章:

mysql - 如何使用多个表检查所选日期内是否有记录?

html - DIV 内的 CSS 对接

css - 将边距底部添加到 div

javascript - 仅在 Internet Explorer 中存在文本重叠问题

html - 3 列响应式页脚

html - 相邻列中的骨架图像和文本

html - 为什么网格元素不居中?

html - 溢出的 flex child 尊重 parent 在 Chrome 中的最大高度,而不是在 Firefox 中

python - 如何在 groupby 和滚动总和之后创建一个包含值的新列?

bash - 将单列文件转换为多列