Question

我正试图用第二个div填充屏幕的重新区域，div 1和2得到固定的宽度。我怎么能达到这种效果呢？

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

使用此CSS代码可以解决问题，当第二个div设置为auto时，它将填充剩余的重新填充区域。

#div1 {
float:left;
width:400px;
height:200px;
background-color: gray;
}
#div2 {
float:right;
width:400px;
height:200px;
background-color: green; 
}
#div3 {
margin-left: 400px;
margin-right: 400px;
width:auto;
height:200px;
background-color: silver;
}

修改

Answer 1

经典，这看起来像这样：

CSS：

#div1 {
    float:left;
    width:400px;
    height:200px;
    background-color: gray;
}
#div2 {
    margin-left: 400px;
    margin-right: 400px;
    width:auto;
    height:200px;
    background-color: silver;
}
#div3 {
    float:right;
    width:400px;
    height:200px;
    background-color: green;
}

HTML：

<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>

DEMO：http://jsfiddle.net/NicoO/5AJkn/

P.S：展开你的屏幕＆gt; 800px以防止布局中断。也可以通过向新的父元素添加最小宽度来解决。

Answer 2

为他们的父母申请position: relative（如果尚未定位）和将以下内容应用于div2：

#div2{
    position:absolute;
    left:400px; /* width of div1 */
    right:400px; /* width of div3 */
    height:200px;
}

JSFiddle

如果旧浏览器支持不是问题，您可以使用css3 calc()功能。

#div2{
    display:inline-block;
    width: calc(100% - 800px); /*100% - width of div1 and div3 */
    height:200px;
}

JSFiddle

Answer 3

如果您的浏览器支持计算，您可以尝试：

#div2 { float:left; width:calc(100% - 800px); height:200px; }

添加边距，如果有的话。

Answer 4

<style>
    .box{display: table;width: 100%;}
    #div1{width:400px; height:200px;background: #000;display: table-cell}
    #div2{width:auto; height:200px;background: #e6e6e6;display: table-cell}
    #div3{width:400px; height:200px;background: #000;display: table-cell}
</style>

<div class="box">
    <div id="div1"></div>
    <div id="div2">ds</div>
    <div id="div3"></div>
</div>

Answer 5

与以下问题相同：

This Codepen fix your problem

如何将剩余宽度应用于其他2个div中间的div

5 个答案: