使div充满剩余的空间
我有一个外部div内concomined 3 div。 我将它们水平放置在左边。 和div3为浮动权
<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>
你不需要浮动#div2 ，它会自动填充剩余的空间。
如果你想要border / padding，你应该给#div2一个子元素。
这是一种使用display: table; https://jsfiddle.net/sxk509x2/
浏览器支持（即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;
}
包含“漂亮”的类不需要完成你想要做的事情。 我只是添加他们的外观。
链接地址: http://www.djcxy.com/p/88271.html