Question

嘿，我有一个100％宽度的div（电脑屏幕的宽度可以是任何东西）在这个宽度内我有两个子div，一个固定宽度说50px，我希望另一个孩子div占用剩余的（ 100％-50px）空间有谁能告诉我如何实现这一目标....

我做过像

<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) .container { width: 100%; } .fixed-width { float: left; width: 50px; } .fluid-width { float: left; width: calc(100% - 50px); }。

{{1}}

not supported in IE8 and below

div填补剩余空间（宽度）

2 个答案: