我有3个div元素,它们都包含在一个外部div中。我通过将它们左浮动来实现水平对齐,第三个div通过右浮动。
<div id="outer">
<div id="div1">always shows</div>
<div id="div2">always shows</div>
<div id="div3">sometimes shows</div>
</div>
div1和div3有固定的尺寸。如果不使用div3,我希望div2填满剩余的空间。如何实现?
可以试试这个方案:https://jsfiddle.net/Siculus/9vs5nzy2/
CSS:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#right{
float:right;
width:50px;
background:yellow;
}
#left{
float:left;
width:50px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
正文:
<div id="container">
<div id="right">div3</div>
<div id="left">div1</div>
<div id="remaining">div2, remaining</div>
</div>
display: table;
的技术https://jsfiddle.net/sxk509x2/
浏览器支持(IE 11+):http://caniuse.com/#feat=css-table
HTML<div class="outer">
<div class="static pretty pretty-extended">$</div>
<input class="dynamic pretty" type="number" />
<div class="static pretty">.00</div>
</div>
CSS
.outer{
width:300px;
height:34px;
display:table;
position: relative;
box-sizing: border-box;
}
.static{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
}
.dynamic{
display:table-cell;
vertical-align:middle;
box-sizing: border-box;
width: 100%;
height:100%;
}
.pretty{
border: 1px solid #ccc;
padding-left: 7px;
padding-right: 7px;
font-size:16px;
}
.pretty-extended{
background: #eee;
text-align:center;
}
你不需要浮动 #div2
,它会自动填充剩余的空间。
如果你想要边框/内边距,你应该给 #div2
添加一个子元素。