html - 自動調整可能なサイド DIV

Question

3 つの DIV を並べて作成する方法を見つけるのに苦労しています。中央の DIV は静的サイズ (900px としましょう) で、左右の DIV は自動調整可能な幅です。

サイド DIV に背景を配置するには、これを行う必要があります。中央の div には既に透明な背景があるため、他の背景を保持している中央の div のラッパー DIV を作成することはできません。ご想像のとおり、中央の DIV の背景が透けて見えます。

何か案は？:)

Answer 1

これはあなたが欲しいですか？

HTML:

<div class="wrapper">

    <div class="side" style="float:right;width:50px;">side</div>
    <div class="side" style="float:left;width:50px;">side</div>
    <div class="middle" style="margin:0 50px;">content middle</div>

    <div style="clear:both; height: 40px;"></div>

    <div id="container">

        <div class="left">side</div>
        <div class="center">center</div>
        <div class="right">side</div>

    </div>

</div>

CSS:

.wrapper {
    max-width: 1000px;
}

.side, .middle {
    text-align: center;
}
.side {
    background: red;
}
.middle {
    background: blue;
    color: white;
}

#container {
    display: table;
    width: 100%;
}

.left, .center, .right {
    display: table-cell;
    text-align: center;
    background: red;
}

.center {
    width: 500px;
    background: blue;
    color: white;
}

jsfiddle

Answer 2

左側にメニュー、中央にコンテンツ、右側に広告や追加情報を表示する 3 つの列を持つ Web サイトが必要だと思います。

私は次のようなものに行きます：

<div class="side" style="width:10%; float:left;">content</div>

<div class="middle" style="width:900px; float:left;">content middle</div> 

<div class="side" style="width:10%; float:left; clear:both; ">content</div>

サイズと配置に応じて、サイドバーにはサイド クラスを使用し、メイン コンテンツにはミドル クラスを使用します。