2

これには JS を使用したくありません。css ソリューションのみを使用してください。

含まれている div 内の列が均等に収まるようにします。つまり、各列はコンテナーの幅の 3 分の 1 です。私はここでこれを達成しました - http://jsfiddle.net/yFxZX/

ただし、これに10px margin加えて、最初の列がコンテナーの左端にキスをし、右の列がコンテナーの右端にキスをするように、列の間にも必要です。粗いモックアップについては、下の画像を参照してください。

ブラウザーのサイズが変更されるか、親コンテナーの幅が変更されると、それに応じて列のサイズを変更してスペースを埋めますが、それらの間の余白は 10px に固定したままにします。

これはJSなしで行うことができますか？

ここに画像の説明を入力

4

2 に答える 2

0

Html で:

<div class="container">
    <div class="box">
        <div class="box-content">
            First
        </div>
    </div>
    <div class="box">
        <div class="box-content">
            SECOND
        </div>
    </div>
    <div class="box last">
        <div class="box-content">
            Last
        </div>
    </div>
</div>

CSSで：

.container {
    background: green;
    overflow: auto;
}
.box {
    width: 33.3%;
    float: left; 
}
.box.last {
    width: 33.4%;
}
.box .box-content {
    margin-right: 10px;
    background: red;
}
.box.last .box-content {
    margin-right: 0px;
    background: red;
}

あなたのボックスがCSSで同じ高さを持っている場合は、追加：

.box .box-content {
    margin-right: 10px;
    background: red;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

http://jsfiddle.net/wqwDN/

于 2012-07-18T11:12:24.443 に答える