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＆lt; br＆gt;
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

这看起来很乱！

我想要达到的目标是：

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

我已经接受了Ian M的答案，因为它肯定会让我走上正轨，但是，仍然存在一个小问题：

当第一个孩子p在左侧col的底部结束时，一切都很好。但是当它延伸到右列时，它会继续（正确地）在列的顶部，但是（并且这是次要的故障）由于其边缘底部：0（以防止第一行的空白第一行） p结束于左侧col的底部，现在它没有下面的边距，第二个p。

从视觉上讲：

第1页：aaa 第二页：bbb

aaaaa bbbbb
aaaaa bbbbb
aaaaa ...
√

但

aaaaa aaaaa 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>

我添加了边框，以便您可以看到正在发生的事情。希望这有帮助，祝你好运！

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

1 个答案: