Html 如何安装div容器以覆盖其间的所有剩余空间?
我的中心div超出了它的容器,它怎么能占据左和右之间的剩余空间? 左侧和右侧必须完全可见,但中间的内容可以溢出隐藏 HTMLHtml 如何安装div容器以覆盖其间的所有剩余空间?,html,css,overflow,Html,Css,Overflow,我的中心div超出了它的容器,它怎么能占据左和右之间的剩余空间? 左侧和右侧必须完全可见,但中间的内容可以溢出隐藏 HTML 只需从#center元素中删除float:left和display:inline块 演示在 <div id=container> <div id=left> <div>first element</div> <div>second element</div>
只需从
#center
元素中删除float:left
和display:inline块
演示在
<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>
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%;
}