html - 两个 div 并排：第一个固定宽度，第二个拉伸以适应

Question

我想创建一个div并排放置两个 s 的布局。第一个div应该尽可能宽，因为它的内容需要它。第二个div应该伸展以填充剩余空间。标记将如下所示：

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

问题是，要么两个divs 都和它们的内容一样宽，并且不拉伸以填充整个水平空间，要么（例如，当使用display: tableond1和display: table-cellond2时d3）两者都div拉伸。

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

Answer 1

我认为应该这样做：

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

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

#d2 {
  white-space: nowrap;
}

#d3 {
  width: 100%;
}

你可以在这里试试