html - CSS3列：列区切りを追加するためのより良い方法

Question

FirefoxとWebkit、Opearaで非常にうまく機能するCSS3列を使用して、複数の列にまたがるコンテンツがあります。

問題は、cssによる列区切りがwebkit（webkit-column-break-before）でのみ実装され、他のブラウザーでは実装されないことです。

休憩を実装するためのより良い方法は何でしょうか。

柱の高さは固定されています。

柱の高さと同じ高さのブロック要素を追加することを考えることができます。

アイデアに感謝します。

ありがとう。

Answer 1

コードや作業内容を確認しなくても、おそらくcolumn-count、column-gapおよびcolumn-ruleプロパティが機能する可能性があります。

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}

これが列ではなく改行に特に関連している場合は 、子要素での使用break-inside: avoid-column;および-webkit-column-break-inside: avoid;または使用を調べて、列間で分割されないようにします。display: inline-block;