我的中心div超出了它的容器,它怎么能占据左右之间的剩余空间呢?left 和 right 必须完全可见,但 center 的内容可以溢出隐藏
** jsFiddle **
HTML
<div id=container>
<div id=left>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
<div id=right>right frame variable width</div>
<div id=center>
<div>first element</div>
<div>second element</div>
<div>third element</div>
</div>
</div>
CSS
html,body{margin:0;}
*{box-sizing:border-box;}
#container {
height:30px;
white-space:nowrap;
background-color:lightgreen;
}
#left {
float:left;
border:4px solid black;
height:100%;
}
#left *{
border:2px solid blue;
display:inline-block;
height:100%;
}
#center {
float:left;
border:4px solid black;
display:inline-block;
overflow:hidden;
height:100%;
}
#center *{
border:2px solid red;
display:inline-block;
height:100%;
}
#right {
float:right;
border:4px solid black;
height:100%;
}
我是一名优秀的程序员,十分优秀!