html - floats の幅を左のスペースに設定するにはどうすればよいですか?

Question

水平方向に 3 つの div を並べて表示したいと考えています。そこで、メインの div (100%) を作成し、その中に 3 つの div を配置します。css で、これら 3 つの childdiv を float:left に設定しました。

今私が望むのは、最初の 2 つを固定幅に設定し、3 つ目を残りの幅に設定することです。

テーブルの列には width:auto; があることを知っています。残りのスペースは自動的に埋められますが、テーブルは使用したくありません。では、フロートでこれを行うにはどうすればよいですか?

Answer 1

3列目に置くoverflow:hiddenと、残りのスペースが自動的に占有されます。このフィドルを参照してください。

例：

HTML:

<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS:

.container {
    border: 1px solid black;
    width: 300px;
    height: 400px;
}

.one, .two {
    border: 1px solid blue;
    float: left;
    width: 50px;
    height: 400px;
}

.three {
    border: 1px solid red;
    height: 400px;
    overflow: hidden;
}

3 番目の列はフローティングにしないでください。

Answer 2

Ejay が提案したように、外側の div には display: table を使用し、内側の div には display: table-cell を使用します。