div填充剩余空間（寬度）

Question

嘿，我在這個寬度內有一個寬度為100％的div（計算機屏幕的寬度可以是任何東西），我有兩個子div，其中一個寬度固定，例如50px，我希望另一個子div占用其余的div（100％- 50像素）的空間，誰能告訴我如何實現這一目標....

我做得像

<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>

在此代碼中，如果50 px不是屏幕的10％，則有一些我不需要的空白空間

Answer 1

jsFiddle

僅浮動固定寬度的元素。

CSS：

.container {
    height: 10px;
    width: 100%;
}
.right {
    background: red;
    height: 10px;
}
.left {
    background: blue;
    width: 50px;
    height: 10px;
    float: left;
}

HTML：

<div class="container">
 <div class="left">
 </div>
 <div class="right">
 </div>
</div>

Answer 2

您可以使用表格布局：

HTML：

<div class="container">
    <div class="fixed-width"></div>
    <div class="fluid-width"></div>
</div>

CSS：

.container {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.fixed-width {
    display: table-cell;
    width: 50px;
}

.fluid-width {
    display: table-cell;
}

http://jsfiddle.net/myajouri/zJq8N/

要么...

您可以使用width: calc(100% - 50px) ，這在IE8及以下版本中不受支持 。

.container {
    width: 100%;
}

.fixed-width {
    float: left;
    width: 50px;
}

.fluid-width {
    float: left;
    width: calc(100% - 50px);
}

http://jsfiddle.net/myajouri/mTq6x/