web-dev-qa-db-ja.com

左右フローのCSS列

divがあり、要素（div）のセットが含まれているとします。これらの要素の高さは異なる場合がありますが、すべての幅は同じです。

私は現在、アイソトープ+石積みでこれを達成していますが、一部のブラウザーはすでにCSS3マルチカラムをサポートしているため、これらのブラウザー用の唯一のCSSソリューションが必要であり、残りはJavascriptにフォールバックします。

これは私が試したCSSです：

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

ただし、これにより、要素のフローが上下左右になります。代わりに、左右のトップダウンフローが必要です。これは私が欲しいものの例です：

1 2 3
4 5 6
7 8 9

しかし、これは私が得るものです：

1 4 7
2 5 8
3 6 9

トップダウンの前に複数列の要素を左右にフロー 同様の質問がありますが、答えに満足できず、高さが異なる要素では機能しません。これはCSS列でまったく可能ですか、それとも制限ですか？

csscss-multicolumn-layout
32
ismriv

複数列の仕様には、列間の要素の分布を変更するプロパティはありません： http://www.w3.org/TR/css3-multicol/ 。このようなプロパティは、モジュールが設計された目的（新聞や雑誌の記事のレイアウトを再現する）に反しているようです。

他の純粋なCSSソリューションはどれも、あなたが探している効果を達成することを可能にしません。

20
cimmanon

レイアウトが常に3列幅になる場合は、内部divでnthセレクターを使用してみてください。
4番目のアイテムをクリアすることでこれを行うことができます。

#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}
<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
    <div id="widget7">8</div>
</div>

JSフィドル

5
David