如何让div填充剩余的宽度？
e.g。
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
如何让div2填满余数？
答案 0 :(得分：62)
尝试这样的事情：
<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>
divs自然会占用其容器的100％宽度，没有必要明确设置此宽度。通过添加与两个边div相同的左/右边距，它自己的内容被强制放在它们之间。
请注意，“中间div”在HTML 中的“右侧div”后
答案 1 :(得分：46)
此解决方案甚至比Leigh提供的解决方案更简单。它实际上是基于它。
在这里你可以注意到中间元素（在我们的例子中，"content__middle"类）不指定了任何维度属性 - 没有宽度，填充，也没有与边缘相关的属性全部 - 但只有overflow: auto;（见注1）。
最大的好处是，现在您可以在左侧和右侧指定max-width和min-width。正确的元素。这对于流畅的布局来说非常棒..因此响应式布局： - ）
注意1：与Leigh的答案相比，您需要添加margin-left＆amp; margin-right类的"content__middle"属性。
这里左边＆amp;正确的元素（类"content__left"和"content__right"）具有固定宽度（以像素为单位）：因此称为非流体布局。
http://jsbin.com/qukocefudusu/1/edit?html,css,output
上的现场演示<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 100px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 100px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
这里左边＆amp;正确的元素（类"content__left"和"content__right"）具有可变宽度（百分比），但也有最小和最大宽度：因此称为流体布局。
采用max-width属性http://jsbin.com/runahoremuwu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 20%;
max-width: 170px;
min-width: 40px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 20%;
max-width: 250px;
min-width: 80px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
在以下网络浏览器上的BrowserStack.com上测试：
答案 2 :(得分：36)
灵活盒子是解决方案 - 他们非常棒。十多年来，我一直想用css这样的东西。您只需要为您的风格添加display: flex即可获得＆＃34; Main＆＃34;和flex-grow: 100（其中100是任意的 - 它并不重要，它恰好是100）。尝试添加此样式（添加颜色以使效果可见）：
<style>
#Main {
background-color: lightgray;
display: flex;
}
#div1 {
border: 1px solid green;
height: 50px;
display: inline-flex;
}
#div2 {
border: 1px solid blue;
height: 50px;
display: inline-flex;
flex-grow: 100;
}
#div3 {
border: 1px solid orange;
height: 50px;
display: inline-flex;
}
</style>
有关弹性框的更多信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
答案 3 :(得分：11)
.main {
display: flex;
}
.col-1, .col-3 {
width: 100px;
}
.col-2 {
flex-grow: 1;
}<div class="main">
<div class="col-1" style="background: #fc9;">Left column</div>
<div class="col-2" style="background: #eee;">Middle column</div>
<div class="col-3" style="background: #fc9;">Right column</div>
</div>
注意：如果supported browsers需要，请添加Flex供应商前缀。
答案 4 :(得分：4)
虽然发布答案的时间晚了bit，但这是一种不使用边距的替代方法。
<style>
#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { overflow:hidden; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="div1">
div 1
</div>
<div id="div3">
div 3
</div>
<div id="div2">
div 2<br />bit taller
</div>
</div>
这种方法就像魔法一样，但here是一种解释：）\
答案 5 :(得分：4)
必须占用剩余空间的Div必须是一个类..其他div可以是id（s）但是它们必须有宽度..
<强> CSS ：
#main_center {
width:1000px;
height:100px;
padding:0px 0px;
margin:0px auto;
display:block;
}
#left {
width:200px;
height:100px;
padding:0px 0px;
margin:0px auto;
background:#c6f5c6;
float:left;
}
.right {
height:100px;
padding:0px 0px;
margin:0px auto;
overflow:hidden;
background:#000fff;
}
.clear {
clear:both;
}
<强> HTML ：
<body>
<div id="main_center">
<div id="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
以下链接包含正在运行的代码，该代码应解决剩余的区域覆盖问题。
答案 6 :(得分：1)
我正在寻找一个解决相反问题的方法，我需要一个固定宽度的div在中心和两侧的流体宽度div，所以我想出了以下内容并认为我会在这里发布任何人都需要它。
#wrapper {
clear: both;
width: 100%;
}
#wrapper div {
display: inline-block;
height: 500px;
}
#center {
background-color: green;
margin: 0 auto;
overflow: auto;
width: 500px;
}
#left {
float: left;
}
#right {
float: right;
}
.fluid {
background-color: yellow;
width: calc(50% - 250px);
}<div id="wrapper">
<div id="center">
This is fixed width in the centre
</div>
<div id="left" class="fluid">
This is fluid width on the left
</div>
<div id="right" class="fluid">
This is fluid width on the right
</div>
</div>
如果更改#center元素的宽度，则需要将.fluid的width属性更新为：
width: calc(50% - [half of center width]px);