如何避免新列（CSS 列）顶部的空行？

Question

我的问题在于 CSS 列属性。我记得有一种方法可以防止空白 (<br>) 行最终成为右列的第一行，但我似乎无法弄清楚。

创建列效果的 CSS：

@media (min-width: 1100px) {
    .inner_p, .introtext p {
        column-count: 2;
        break-after: auto;
        column-gap: 3em;
    }
}

HTML：

<p>With an article, and a couple <br><br>s inside. These <br>s are IMO what sometimes shows up as first element in the right column, causing the following appearance:</p>

xxxxxx

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

这看起来有点乱！

我想要实现的是：

xxxxxxxxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

我已经接受了 Ian M 的回答，因为它确实让我走上了正轨，但是，还有一个小问题：

当第一个孩子 p 在左列的底部结束时，一切都很好。但是当它延伸到右列时，它会（正确地）在列的顶部继续，但是（这是小故障）由于它的 margin-bottom:0 （以防止在第一行的情况下出现空白的第一行p 结束于左 col 的底部），它现在没有到下面的第二个 p 的边距。

视觉上：

第一个 p : aaa 第二个p：bbb

aaaaa bbbbb
aaaaa bbbbb
啊啊啊……
√

但是

啊啊啊啊啊
aaaaa bbbbb
aaaaa bbbbb
a 和 b 之间没有边距！

一个难题。

Answer 1

我认为实现此目的的更好方法是重构您的代码，以便 每个段落 都是它自己的<p>。我建议将它们全部放入具有列和中断 CSS 的父 <div>。

然后，您所要做的就是将 第一个 段设为零margin-top，使其与第二列齐平。这就是我的意思：

body { width: 90vw; margin: 2vw; }
.parent {
    column-count: 2;
    break-after: auto;
    column-gap: 3em;
	
    /* for testing */ 
	padding: 15px;
	border: 1px solid red;
}
.parent > p {
    /* for testing */ 
	border: 1px solid blue;
}
.parent > p:first-child {
	margin-top: 0;
}

<div class='parent'>
	<p>A look at Mrs. Clinton’s speaking venues and the whopping sums she’s received since she left State gives us an indication who’s desperate for a place at the trough — and whom another Clinton administration might favor.</p>
	<p>First off, there’s Wall Street and the financial-services industry. Democratic champions of the Little Guy are always in bed with the Street — they don’t call Barack Obama “President Goldman Sachs” for nothing, but Mrs. Clinton has room for Bob and Carol and Ted and Alice and their 10 best friends. Multiple trips to Goldman Sachs. Morgan Stanley. Deutsche Bank. Kohlberg Kravis Roberts. UBS Wealth Management.</p>
	<p>As the character of Che Guevara sings in “Evita”: “And the money kept rolling in.” And all at the bargain price of $225,000 a pop . . . to say what? We don’t know, because Hillary won’t release the transcripts.</p>
</div>

我添加了边框，以便您可以看到发生了什么。希望这会有所帮助，祝你好运！