我有一个容器(宽度不知道),包含四个div,如下所示：
| Div1 | Div2 ............... | .............. Div3 | Div4 |
最左边和右边的div(Div1 / Div4)是固定的宽度;这是很容易的部分.
Div2 / Div3的宽度是未知的,我想避免为他们设置固定宽度,因为根据内容可以比其他内容宽得多(所以我不能只是例如每个使用50％的可用空间)
我希望Div2 / Div3的宽度由浏览器自动计算,那么如果剩下剩余的空间,它们应该伸展来填充任何剩余的空间(Div2 / Div3之间的剩余空间是多少)
我现在接近的方式是：
> Div1浮动左(或绝对定位)
> Div4漂浮右(或绝对定位)
> Div2的边距左边等于Div1的宽度(已知)
> Div3具有等于Div4宽度的边距权(已知)
我的问题是,如何让Div2和Div3扩展以填补剩余的可用宽度？我想有一个选择是使用display：table,另一个可能性是flex-box.有没有其他选择？
更新：为了清楚编辑.
更新2：请注意,我不能假设Div2和Div3应该分别获得可用空间的50％.这是在问题中明确指出的,但不知何故,我根据这个假设得到答案.
解决方法
使用overflow：hidden(或overflow：auto – 只要溢出未设置为可见[默认])触发块格式化上下文以填充剩余宽度
(对于div1和div4,我假定固定宽度为100px)
<div class="div1">DIV 1</div>
<div class="container">
<div class="div2">DIV 2</div>
<div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>
CSS
html,body,div
{
height: 100%;
}
.div1 {
float:left;
width: 100px;
background: aqua;
}
.container
{
overflow: hidden;
padding-right: 100px;
Box-sizing: border-Box;
background: green;
}
.div2 {
background:yellow;
float:left;
}
.div3 {
background:brown;
overflow: hidden;
}
.div4 {
position: absolute;
right:0;
top:0;
background:pink;
width: 100px;
}
