Question

我有一些看起来像这样的代码

<div class="passage-container">
    <p>Paragraph 1...</p>
    <p>Paragraph 2...</p>
    <p>Paragraph 3...</p>
    <p>Paragraph 4...</p>
    <p>Paragraph 5...</p>
    <p>Paragraph 6...</p>
</div>

如果所有段落文本的长度都相同，那么我可以在第3段之后将其分栏，并让第4段开始新的列。但是，最重要的是某些段落会比其他段落长/短，因此，例如，我可能希望第1和2段在第一列，然后在第3-6段在第二列。

有没有一种方法仅使用CSS来实现此功能，即flexbox会根据段落中的内容量来调整在一个列中显示哪些段落，而在段落中显示另一个段落，因此这些列将达到平衡？

谢谢

Answer 1

尝试使用CSS列

.passage-container {
    columns: 2;
}

它们运作良好，但有时可能令人沮丧，但中断侧/之前/之后的规则可以帮助您处理格式。有关详情，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Answer 2

段落将在DOM中定位时显示。但是您可以平衡文本。

.passage-container {
  columns: 2;
  column-gap: 50px;
}
.passage-container p {
  text-align: justify;
}
.passage-container p:first-child {
  margin-top: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="passage-container">
  <p>1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nesciunt.</p>
  <p>2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Tempora corporis nostrum qui distinctio impedit!</p>
  <p>3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora maxime delectus fuga sapiente commodi, nihil fugit neque distinctio consequuntur modi eligendi sequi, nemo quasi soluta voluptas cupiditate, quas beatae!</p>
  <p>4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nesciunt.</p>
  <p>5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Tempora corporis nostrum qui distinctio impedit!</p>
  <p>6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad nam beatae adipisci facere ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit tempora maxime delectus fuga sapiente commodi, nihil fugit neque distinctio consequuntur modi
    eligendi sequi, nemo quasi soluta voluptas cupiditate, quas beatae!</p>
</div>
</div>

两列Flexbox布局中的“平衡段落”？

2 个答案: