我当前的问题是我有三个div元素；一个漂浮在左边，一个漂浮在右边，一个漂浮在这两个之间。我希望中心div自动伸展到两个div之间可用宽度的最大宽度。
的HTML
<div id="contain">
<div id="left">1</div>
<div id="filler"></div>
<div id="right">2</div>
</div>
的CSS
#left {
text-decoration: none;
display: inline-block;
float: left;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#navFiller {
display: inline-block;
position: fixed;
float: left;
width: auto;
height: 45px;
background: #FF9000;
}
#right {
text-decoration: none;
display: inline-block;
float: right;
width: auto;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}
项目的jsfiddle：
如果在浮动元素之后添加填充元素，然后稍微改变其样式（包括为样式块提供正确的ID），那么您将得到：
#left {
display: inline-block;
float: left;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#filler {
display: block;
float: none;
height: 45px;
background: #F00;
}
#right {
display: inline-block;
float: right;
padding: 0px 20px 0px 20px;
height: 45px;
text-align: center;
line-height: 300%;
background: #FF9000;
color: #FFFFFF;
}
#contain {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
display: inline;
}<div id="contain">
<div id="left">1</div>
<div id="right">2</div>
<div id="filler">m</div>
</div>或者，模拟一个表：
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 5%;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
}<div id="contain">
<div id="left">1</div>
<div id="filler">m</div>
<div id="right">2</div>
</div>两种方法都有其优点。完全取决于您，适合您。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句