2

div 要素を使用して 4 つの列で行を作成する方法を理解しようとしています。

1 列目と 3 列目の幅は 46 ピクセルにする必要があります。2 番目と 4 番目の列は、左側の場所の 50% の幅にする必要があります (100% のウィンドウ幅 - 46*2 など)。ここで最初の灰色のボックスでわかるように、私はすでにそれを認識しています。

さて、2 列目と 4 列目のテキストは長くなる可能性があるので、 div で分割したいと思います。

2 番目の灰色のボックスは、テキストが長い場合にどのように表示されるかを示しています。3 番目の灰色のボックスは、'display:table-cell' を使用した別の試みを示しています。唯一の問題は、4 番目の列の幅が増加する一方で、2 番目の列の 50% の幅が減少することです。

両方の列を同じ幅にする必要があります。私がそれを達成する方法を知っていますか？前もって感謝します。

4

1 に答える 1

3

display: table-cell私はあなたのバージョンを適応させることにしました。

最も重要な変更は、 を追加したことtable-layout: fixedです。それが行うことは、指定されていない列間で残りの利用可能な幅を均等に分配することwidthです。

参照: http://jsfiddle.net/thirtydot/5p5V9/2/

CSS:

.outer {
    color: #ffffff;
    background-color: #373737;
}

.inner {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.inner > div {
    display: table-cell;
}
.alignC {
    text-align: center;
    font-weight: bold;
    color: #949494;
    background-color: #2e2e2e;
}
.first, .alignC {
    width: 46px;
    font-weight: bold;
}

.alignR, .alignL {
    background: #666;
}​

HTML:

<div class="outer">
    <div class="inner">
        <div class="first">1</div>
        <div class="alignR">r</div>
        <div class="alignC">m</div>
        <div class="alignL">This long text shall break in the div</div>
    </div>
</div>

のブラウザサポートdisplay: table-cell。

于 2012-06-13T11:42:03.797 に答える