web-dev-qa-db-ja.com

3列、中央幅が柔軟な幅

隣接する3つのdivで構成されるレイアウトが必要です。サイドのdivには静的な幅があり（JavaScriptによって変更される場合があります）、中央のdivは残りの領域を埋めます。最初のdivのサイズが変更されると、中央のdivのみに影響します。これは、3つの列で構成されるテーブル（動的レンダリングあり）に似ています。

わかりましたが、問題はどこにありますか。問題は、floating-left divを最初の列に入れ、2番目と3番目の列にブロックdivを入れると、ブロックdivが奇妙な動作をするということです。最初の列からフローティングdivの下の列に表示されます。

例。 1列目と2列目にはフローティングdivがあり、3列目にはブロックdivがあります。ブロックdivは、浮動divの高さを中心に下にシフトされます。中央の列のDivは、float型の左プロパティを持つことだけがy位置にシフトされません。

3つのレイアウトdivのそれぞれが互いに独立していることを望みます。 3番目の列の要素が最初の2列のfloat浮動小数点数（floatプロパティを使用）をフローする理由がわかりません。

コード：

<div style="margin: auto; display: table; width: 260px;">
        <div style="display: table-row;">
            <div style="display: table-cell; width: 100px;">

                <div style="float: left; width: 40px; height: 50px;">COL1</div> 

            </div>
            <div style="display: table-cell;">

                <div style="float: left; height: 50px;  width: 40px;">COL2</div>

            </div style="display: table-cell; width: 100px;">
            <div class="sideContainer">

                <div>COL3</div>

            </div>
        </div>
</div>

そして結果： result

それを修正する方法。すべてのレイアウトdiv（列）を互いに独立させる方法。何か案は？

csspositioningcss-floatcss-tables
25
cartoon_20

これを行うには、col1とcol3を固定幅で左右にフロートさせます。

次に、col1とcol3の幅に等しいcol2に左右のマージンを追加します。

これにより、3つの列が得られます。 col1とcol3は固定幅で、col2は使用可能な幅を満たします。

col2's content box in blue, and its margins in yellow
（col2のコンテンツボックスは青、マージンは黄色）

<div class='container'>
    <div class='right'>
        col3
    </div>
    <div class='left'>
        col1
    </div>
    <div class='middle'>
        col2
    </div>
</div>



.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}

ここで試してください： http://jsfiddle.net/22YBU/

ちなみに、display：table、display：table-rowおよびdisplay：table-cellが必要な場合は、テーブルを使用してください;-)

56
Arnaud Le Blanc