gpt4 book ai didi

html - 如何让 div 容器覆盖其间的所有剩余空间?

转载 作者:太空宇宙 更新时间:2023-11-04 04:16:17 24 4
gpt4 key购买 nike

我的中心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%;
}

最佳答案

只需从 #center 元素中删除 float:leftdisplay:inline-block..

演示在 http://jsfiddle.net/Z2x8e/8/

关于html - 如何让 div 容器覆盖其间的所有剩余空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19882236/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com