用div填充剩余的宽度
我怎样才能让一个div填满余下的宽度？
例如
<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填满剩下的东西？
尝试这样的事情：
<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>
div自然会占用其容器的100％宽度，因此不需要明确设置该宽度。 通过添加与两侧div相同的左/右边距，它自己的内容被迫放在它们之间。
需要注意的是“中间格”“右格” 后进入的HTML
最新的解决方案（2014年10月）：准备流体布局
介绍：
这个解决方案比Leigh提供的解决方案更简单。 它实际上是基于它的。
在这里，你可以看到，中间的元素（在我们的情况下， "content__middle"类） 没有指定任何尺寸属性-没有宽度，也没有填充物，也没有保证金相关的属性在所有-但只有一个overflow: auto; （见注1）。
最大的好处是现在你可以为你的左右元素指定一个max-width和一个min-width 。 这对流体布局来说太棒了......因此， 响应式布局:-)
注意1：与Leigh的答案相比，您需要将“ margin-left和“ margin-right属性添加到"content__middle"类。
具有非流体布局的代码：
在这里，左右元素（类"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>
带流体布局的代码：
在这里，左右元素（类"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上通过以下Web浏览器进行测试：
Flex-boxes是解决方案 - 它们非常棒。 我一直想从这个CSS出来十年。 所有你需要的是添加display: flex按照你的风格为“Main”和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/
链接地址: http://www.djcxy.com/p/88269.html