1

高さ100ピクセルの親divがありますが、全幅（デフォルト）です。その中には20px×20pxのdivがたくさんあります。子のdivが最下部に到達しようとしているときに、次のdivがラッピングを開始するようにします。つまり、右側に並べて表示を開始する必要があります。言い換えれば、私はスクロールを起こさせたくありません。しかし、ラッピング。

<div id="parent" style="height:100px">
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   ............
</div>
4

2 に答える 2

3

CSS3列を使用できます-http ://jsfiddle.net/spbqh/

#parent {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;

    background: #eee;
}

div > div {
    height: 20px;
    width: 20px;
    background: beige;
}
于 2012-07-17T17:45:26.040 に答える
1

CSS3列を使用してみることができます。残念ながら、現時点ではFirefoxとChromeでしか動作しないと思いますので、IEでは動作しません。

http://jsfiddle.net/Lf5Ma/

<div id="parent">
    <div id="test">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>

        <!-- Snip -->

        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

...そしてCSS：

#parent{
    position:relative;
    height:110px;
    width:100%;
    border:1px solid red;
}

#test{
    height:100%;

    -webkit-column-width:25px;
       -moz-column-width:25px;
            column-width:25px;    

    -webkit-column-gap:0px;
       -moz-column-gap:0px;
            column-gap:0px;
}
.child{
    width:20px;
    height:20px;
    border:1px solid #000;
}

編集：
私は動作する可能性のあるjavascriptベースの列スクリプトを見つけました。スタイルシートの後にJavaScriptを追加するだけのようで、変更を加えることなく、先に進んで新しい列のプロパティを使用できます。少なくともIE9で動作することを確認しました。

于 2012-07-17T17:52:09.157 に答える