1

私はdivを持っています。それはn個のdivで構成されます

<div class="wrapper">
    <div class="parent">
        <div class="child"> top left     </div>
        <div class="child"> mid left     </div>
        <div class="child"> bottom left  </div>
        <div class="child"> top right    </div>
        <div class="child"> mid right    </div>
        <div class="child"> bottom right </div>
    </div>
</div>

max-heightラッパーまたは親のいずれかにいくつかを保持して、それらを並べて表示したいと思います。

例: 最初の 3 つの子は最初の列、次の 3 つは 2 番目の列、最後の 1 つは 3 番目の列になります。

display: inline-block私はすべてを試しましたfloat: left、、、しかしpadding、max-heightどれもうまくいきませんでした。

4

3 に答える 3

0 
.wrapper {
width: 100%;
}

.child {
width: 33%;
float: left;
}
于 2013-09-25T12:40:06.763 に答える
0

私はあなたのためにフィドルを作成しましたが、列の配置が変更されています。

フィドル

<div class="wrapper">
    <div class="parent">
        <div class="columnOne">one</div>
        <div class="columnTwo">xzcx</div>
        <div class="columnOne">cas</div>
        <div class="columnTwo">cccccc</div>

        <div class="columnOne">asds</div
        <div class="columnTwo">ccccccccswsww</div>
         <div class="columnOne">wdw</div>
        <div class="columnTwo">ccccccccswsww</div>



    </div>
</div>

.wrapper {
    max-width:100%;
}

.parent {
    width: 100%;
    height:100%;
    float: left;
}

.columnOne {
    float: left;
    width: 45%;
}

.columnTwo {
    float: left;    
    width: 45%;
}
于 2013-09-25T12:57:46.377 に答える