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

Question

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

创建column-effect的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 的回答，因为它确实让我走上了正确的轨道，但是，仍然存在一个小问题：

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

形象地说：

第 1 页：aaa 第二页：bbb

aaaaa bbbbb
aaaaa bbbbb
aaaaa ...
√

但是

aaaaaaaaaa
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 5,000 a pop . . . to say what? We don’t know, because Hillary won’t release the transcripts.</p>
</div>

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

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

How to avoid blank lines at the top of new column (CSS columns)?

css

layout

responsive-design

css-multicolumn-layout