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

Question

我有一个包含四个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%的可用空间.这在问题中明确说明,但不知何故,我不断得到基于这个假设的答案.

Answer 1

我提出了3种不同的解决方案来获得适当的宽度:

• 表格单元格:

  parent: {display: table}
  
  childs: {display: table-cell}
  

• 弹性网格:

  parent: {display: inline-flex}
  
  childs: {flex-grow: 1}
  

• 盒装容器:

  parent: {float: left}
  
  container: {box-sizing: border-box; padding: 0 WIDTH}
  
  childs: {width: 50%}
  

最后一个解决方案使用额外的html标记,并使用相对定位垂直对齐元素(意味着您必须具有固定的高度).

我建议你使用第一个解决方案,因为它与旧版浏览器更兼容,它实现起来很简单,工作得很好.

演示:http://jsfiddle.net/R8mqR/9/embedded/result/

Answer 2

利用overflow:hidden(或溢出:自动 - 只要溢出未设置为可见[默认])触发block formatting contexts填充剩余宽度

(我假设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; 
}