0

我的问题是 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 <br>
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx

这看起来有点乱！

我想要实现的是：

xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx xxxxxx
xxxxxxx

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

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

从视觉上讲：

第一人：aaa 第二人：bbb

aaaaa bbbbb
aaaaa bbbbb
aaaaa ...
√</p>

但

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

一个难题。

4

1 回答 1

2

我认为实现这一点的更好方法是重构您的代码，以便每个段落都是自己的<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>

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

于 2016-05-23T14:51:42.190 回答