我目前的问题是我有三个div元素;一个漂浮在左边,一个漂浮在右边,一个漂浮在这两个之间.我希望中心div自动拉伸到两个div之间可用宽度的最大宽度.
<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>
这两种方法都有其优点.这取决于你哪个适合你.
