37

高さが異なる可能性がある一連の要素 (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

Flow multi-column elements left-right before top-downでは、同様のことが尋ねられますが、私は答えに満足できず、異なる高さの要素では機能しません。これは CSS 列でまったく可能ですか、それとも制限ですか?

4

5 に答える 5

24

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

他の純粋な CSS ソリューションでは、探している効果を実現することはできません。

于 2013-02-17T20:10:46.043 に答える
6

レイアウトが常に 3 列幅になる場合はnth、内部 div でセレクターを使用してみてください。
これを行うには、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フィドル

于 2013-02-17T20:14:36.970 に答える