html - 3 div の中間 div が残りの幅を占めます

Question

わかりました、私はこれで自分のボールをつぶしてきました。

3 つの div があります。左、中、右。すべて高さ 100%。左右の div の幅は 150px に固定されています。ここで、中央の div が残りのスペースを占有するようにします。

例：ここ

CSS:

#left {
    height:100%;
    width:150px;
    float:left;
    background:red;
    z-index:999;
}
#middle {
    height:100%;
    width:100%;
    background:yellow;
    margin-left:-150px;
    margin-right:-150px;
}
#right {
    float:right;
    height:100%;
    width:150px;
    background:red;
    z-index:998;
}

Answer 1

使用display: table：

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

#left, #middle, #right {
    display: table-cell;
}

#left, #right {
    width: 150px;
}

#containerのような親要素はどこにありますか

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

これがフィドルです。

Answer 2

この同様の回答を確認してください

HTML

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    width: 150px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}

デモ

Answer 3

表のセルを使用せず、外側のボックスに固定幅を与えたくない場合 (代わりに、幅をコンテンツによって決定する場合は、overflow-hidden および float メソッドを使用できます)。

この方法の悪い点は、div でオーバーフローを非表示にする必要があることと、div を逆方向に配置する必要があることです (以下を参照)。

デモ

HTML

<div class='container'>

    <div class='third-box'>Third</div>

    <div class='first-second'>
        <div class='first-box'>First</div>
        <div class='second-box'>Second</div>
    </div>

</div>

CSS

.container {
     width: 400px;
}

.first-second {
    overflow: hidden;
}

.first-box {
    float: left;
    background-color: coral;
}

.second-box {
    overflow: hidden;
    background-color: aquamarine;
}

.third-box {
    float: right;
    background-color: salmon;
}