两个div并排：第一个固定宽度，第二个拉伸到适合

Question

我想创建一个布局，其中我有两个div并排。第一个div应该与其内容要求的范围一样宽。第二个div应该伸展以填满剩余的空间。标记看起来像这样：

<div id="d1">
    <div id="d2">fixed width</div>
    <div id="d3">stretching</div>
</div>

问题是两个div和它们的内容一样宽，并且不会拉伸以填充整个水平空间，或者（例如在display: table上使用d1时display: table-cell和d2 d3 div d2。{/ p>

如何修复d3的宽度并拉伸d2以填补剩余空间？请注意，{{1}}的宽度未知，因此我无法以像素为单位指定它。

Answer 1

我认为应该这样做：

#d1 {
  display: table;
  width: 100%;
}

#d2, #d3 {
  display: table-cell;
  padding: 2px 6px;
}

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

您可以尝试here