CSSの列数は、fire foxとchromeの動作が異なります。

Question

divのようなレンガを表示したい。私は列数のプロパティを試してきましたが、それはfire foxではうまく動作しますが、chromeではうまく動作しません。

.container { 
    column-count: 3; 
    column-gap: 1em; 
} 
.block { 
    width: 100%; 
    border: 1px solid; 
    display: inline-block; 
    text-align: justify; 
    margin-bottom: 5px; 
} 

参照してください以下の例 DEMO

どのように私はこの問題を解決することができますか？

Answer 1

あなたは、コンテナを曲げる必要があります：{}インラインブロックを削除

.container { 
 
    column-count: 3; 
 
    display:flex; 
 
} 
 
.block { 
 
    width: 100%; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
    text-align: justify; 
 
    margin-bottom: 5px; 
 
    padding:10px; 
 
}

<div class="container"> 
 
    <div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
 
    <div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    <div class="block">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> 
 
</div>

Answer 2

が.block：

.container 
{ 
    display:flex; 
} 

はあなたが必要3列、参照を与えます。追加-webkit-column-count：3;/* Chrome、Safari、Opera */chromeサポートライン用。次に、すべてのdivに等しい高さを設定します。 （または）ディスプレイフレックスを使用します。

.container { 
 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
-moz-column-count: 3; /* Firefox */ 
 
column-count: 3; 
 
-webkit-column-gap:1em; 
 
-moz-column-gap:1em; 
 
column-gap:1em; 
 
} 
 
.block { 
 
    width: 100%; 
 
    border: 1px solid; 
 
    text-align: justify; 
 
    margin-bottom: 5px; 
 
}

<div class="container"> 
 
    <div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    <div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> 
 
    <div class="block">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> 
 
</div>