新しい列（CSS列）の上部にある空白行を避ける方法は？

Question

私の問題は、CSSの列のプロパティです。私は空白（<br>）行が右の列の最初の行として終わるのを防ぐ方法があることを思い出しましたが、私はそれを理解できないようです。

列効果を作成CSS：

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

HTML：XXXXXXX XXXXXX

<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
Th厄介なように見えます！

私は何を達成したいと思うことはある：

XXXXXXX XXXXXX
XXXXXXX XXXXXX
XXXXXXX XXXXXX
それは間違いなく右のトラックに私を置くので、私はすでにイアン・Mの答えを受け入れてきた XXXXXXX

しかし、わずかな問題が残ります：

最初の子pが左の列の右端で終わると、すべてが良好です。しかし、それは右の列に伸びるとき、それはmargin-bottom：0のために列の上部で（正確に）続けますが（これはマイナーなグリッチです）（最初のpは左の列の最後で終わります）、次の2番目の行には余裕がありません。

第一のp：：AAA 第二のp：

AAAAA BBB
AAAAA BBBBB
AAAAA BBBBB ...

√しかし

AAAAAのAAAAA
を視覚的に言って

aaaaa bbbbb
aaaaa bbbbb
aとbの間にマージンはありません！

難解です。

Answer 1

これを実現するより良い方法は、各段落が独自の<p>であるように、あなたのコードをリファクタリングすることだと思います。私はそれらのすべてを列とブレークCSSがある<div>親に入れておくことをお勧めします。

次に、を最初にの段落ゼロmargin-topにするだけで、2番目の列と同じレベルになります。ここで私が何を意味するかです：あなたは何が起こっているのを見ることができるように

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

<div class='parent'> 
 
\t <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> 
 
\t <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> 
 
\t <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>

私は国境を追加しました。これは、幸運を助けることを望む！