2017-10-12 11 views
3

column-countプロパティを使用してCSS3マルチカラム機能を使用して複数のカラムに分割しました。
これは私のコードです:Firefox/Developer Editionでカラムカウントプロパティが機能しない

div { 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
    -moz-column-count: 3; /* Firefox */ 
    column-count: 3; 
} 

それは私のFirefoxのバージョンまたはFirefoxの開発者版に取り組んでいません。 コードが取り組んでいる:Google Chromeの、オペラ、およびMicrosoftエッジ

が、これはバグですか、いずれかの解決策はありますか? Can I use...

Firefoxバージョン55から59によると

答えて

1

私は数年前と同じようなことに取り組まなければなりませんでした。私が覚えていることは、ブラウザ間のサポートが(特に旧式のブラウザでは)弾丸にならないことでしたが、これはかなりうまくいくはずです。

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

ul

タグの外側容器内column-breakを置きます。 また、より複雑なレイアウトで作業する必要がある場合は、breakという特別なプロパティが役立ちます(liを参照)。

最新のFirefox、Chrome、Safari for Macでテスト済みです。

注:フレックスボックスを使用すると、より良い結果が得られ、より最新のソリューションが得られるでしょう。あなたのプロジェクトがflexboxを使用できるなら、それを試す価値があります。

+0

偉大な、うまくいきます。ありがとうPatrizio! – Nisarg

+0

あなたはNisargを歓迎する以上に嬉しいです。 –

1

は、この機能のための部分的なサポートを持っている:

部分的なサポートがbreak-beforebreak-afterbreak-insideプロパティをサポートしていないを指します。 WebKitおよびBlinkベースのブラウザ は、同じ結果を達成するために非標準の-webkit-column-break-* プロパティを同等にサポートしています(ただし、autoalways の値のみ)。 Firefoxはbreak-*をサポートしていません。

さらに詳しいサポートが必要な場合は、問題を表示するコードスニペットを投稿する必要があります。

+0

break-before、break-after、break-insideプロパティは部分的にサポートされていますが、column-countはサポートされていません。参照:[リンク](https://caniuse.com/#search=column-count)コメントありがとう! – Nisarg

関連する問題