css - 如何避免新列(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>

xxxxxxx

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

这看起来有点乱!

我想要实现的是:

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

我已经接受了 Ian M 的回答，因为它确实让我走上了正确的轨道，但是，仍然存在一个小问题:

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

形象地说:

第一页:aaa 第二页:bbb

啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊……
√

但是

啊啊啊啊啊
啊啊啊啊啊啊啊啊
啊啊啊啊啊啊啊啊
a 和 b 之间没有边距!

一个难题。

Answer 1

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

然后，您所要做的就是将第一个 段设为零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>

我添加了边框，这样您就可以看到发生了什么。希望这对您有所帮助，祝您好运!