3

私が持っているとしましょう

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

私がしたいのは、.single div を左から右に水平にレンガのように 2 行に配置することです。1 番目の div は左上隅に配置され、2 番目は 1 番目の下に配置され、3 番目は 1 番目の隣に配置されます。 4 番目は 3 番目の下に配置され、以下のようになります。

1 3 5 7 9
2 4 6 8

すべての div は同じサイズです。

私は masonry.js を試してみましたが、それは魅力のように機能しますが、非常に単純なタスクの複雑なソリューションへの道です (単にソリューションが重要です)。

フィドルの遊び場

4

5 に答える 5

2

まさにそれを行うCSSプロパティがあります

http://tinker.io/8ff59

.cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

http://caniuse.com/#feat=multicolumn

于 2013-05-11T16:54:51.403 に答える
0

あなたが持っている構造を持つcssでそれを行うことはできないと思います。

この構造は、必要なレイアウトを取得するのに役立ちます。

<div class="a">
   <div class="b">
       <div class="c">1</div>
       <div class="c">2</div>
   </div>
   <div class="b">
       <div class="c">3</div>
       <div class="c">4</div>
   </div>
</div>


<style>
div.a div.b {float: left; width: 100px;}
</style>
于 2013-05-11T16:24:44.157 に答える