css – 拆分两个div之间的可用宽度

我有一个容器(宽度不知道),包含四个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)

FIDDLE

标记

<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; 
}

原文地址：https://www.jb51.cc/css/216692.html