css - 在两个 div 之间拆分可用宽度

Question

我有一个容器(宽度未知)，里面有四个div，如下:

| Div1 | Div2 ............... | .............. Div3 | Div4 |

最左边和最右边的div(Div1/Div4)是固定宽度的；这是简单的部分。

Div2/Div3 的宽度未知，我想避免为它们设置固定宽度，因为根据内容，一个可以比另一个宽得多(所以我不能只是例如让每个使用 50可用空间的百分比)

我希望 Div2/Div3 的宽度由浏览器自动计算，然后如果有任何剩余空间，它们应该拉伸(stretch)以填充任何剩余空间(剩余空间如何在 Div2 之间分割并不重要/Div3)

我现在处理这个问题的方式是:

• Div1 向左浮动(或绝对定位)
• Div4 向右浮动(或绝对定位)
• Div2 的 margin-left 等于 Div1 的宽度(已知)
• Div3 的 margin-right 等于 Div4 的宽度(已知)

我的问题是，如何让 Div2 和 Div3 拉伸(stretch)以填充剩余的可用宽度？我想一个选择是使用 display: table，另一种可能是 flex-box .有没有其他选择？

更新:为清楚起见进行了编辑。

更新 2:请注意，我不能假设 Div2 和 Div3 应该各自获得 50% 的可用空间。这在问题中有明确说明，但不知何故，我一直根据这个假设得到答案。

Answer 1

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

• 表格单元格:

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

• flex 网格:

  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/