列の順番

Question

私のCSSでCSSを記入：私は一度に3つの画像を表示しない方法を映像で見られるように塗りが起こるしかし

#columns { 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-fill: auto; 
    column-count: 3; 
    column-gap: 10px; 
    column-fill: auto; 
} 

私の列数は3です。

は以下

https://jsfiddle.net/swh36mLm/

申し訳ありませんが、それは私の完全なCSSファイルが含まれている私のjsfiddleです。

Answer 1

代わりにCSSフレックスボックスを使用できますか？ #columnsをフレックスコンテナに変更した場合は、直下の子divを33％の幅に設定します（実際には、ギャップ、枠線などに合わせて調整します）。あなたが継続的に追加できる3列のレイアウトがあります。

あなたのCSSは、ここでは、ほとんど25,000行長いので、私は変更するものである：

• スルーライン23142から@mediaルールを削除フレキシボックスであることを#columnsルールを書き直し（以下のコードを参照してください）
• 子供のdivの幅を30％に設定するルールを追加しました（もう一度、30％は最も大きな "3分の1"の列を得るために遊ぶ必要があります）

#columns { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
} 
 

 
#columns > div { 
 
    width: 30%; 
 
}

私は、これらの変更を使用してJSFiddleを編集し、その結果は以下の見てしまった：

私はそれが役に立てば幸い。あなたはCSS Flexboxes詳細をしたい場合は、（それは私の過去にたくさん助けています）、このURLをチェックアウト：Visual Guide to CSS3 Flexbox Properties

Answer 2

コンテンツカードに3列を使用する場合は、column-countは適切なオプションではありません。 column-count〜divide a long text into multiple columnsを使用できます。あなたの例では、カードを複数のクールマンに分割しようとします。あなたは、ラッパーのdivのための高さを設定した場合、それは可能だが、私はあなたが期待される結果を受信しないことがあります推測：

<div id="columns" style="height:350px;">...</div> 

あなたは、マルチコラムレイアウト、してくださいcheck out this questionを持っているしたい場合。

Answer 3

「列カウントが」このコードでは、たとえば、あなたがしたいポイントに

を分割しません

<div class="c">...</div> 
<div class="c">...</div> 
<div class="c">...</div> 

「c」クラスのすべての単一のdivを1つの項目として考慮しません。このテキストで

---

たいポイントの「列カウント」デバイド、

例えば

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 

3つの、部分的に等しい部分を作成し、3つの列でそれらを示しています。あなたが最もすべてのアイテム

width: 33.33333333%; 

を取得し、それらをフロートソリューションの

---

。

完全なコードが必要な場合は、私のコメントにしてください。