在CSS中，当其他元素的宽度未知时，如何自动填充容器？

我在一个包含元素中有两个元素。容器的宽度为960像素，每侧有10像素的填充物。我有两个相邻的浮动元素。第一个元素将包含未知数量的文本，另一个元素需要调整以填充容器的其余部分

例如：

<div id="container">
     <div id="item1">Unknown size</div><div id="item2">fill in width of left over</div>
</div>

剩余宽度中的未知大小填充

编辑-->

更多信息：

我的第一个元素将包含未知数量的文本。第二个元素将不包含任何内容，而是包含背景，更像是文本的重音。你可以这样想：

启动引擎！（后面是轮胎标记的图案） 转弯时要小心！（后面是轮胎标记的图案）

这两个项目的文字长度不同，因此轮胎标记也会不同。但我需要所有人都在同一条线上

您可以浮动

#item1

而不浮动

#item2

，如下所示：

由于浮动，#item1将位于#item2的顶部，它将从常规文档流中删除。正如您在JSFIDLE中看到的，item2中的文本在item1旁边流动，而背景占据了整个宽度

---

如果您将项目放在其下方，则应在

#item2

之后的第一个项目中添加

清除：left

，如果您可以确保其中一列的高度始终较大，则可以使该列保持未漂浮状态，并绝对定位第二列。第二列将通过顶部和底部固定容器（需要

位置：relative

）

.container {
  position: relative;
  padding: 0 10px;
}

.left {
  width: 200px;
}
.right {
  position: absolute;
  width: 100px;
  right: 10px;
  top: 0px;
  bottom: 0px;
}

---

在这里摆弄：

你可以使用flexbox。Chris解释得很好

将#item2的背景与#item1分开是最大的问题。只需给item1一个背景颜色，你就应该很好了。在这种情况下，每个“列”的大小都是未知的。你可能想签出。它使用了一些技巧使两列出现，但背景不一定是列的一部分。实际发生的是，有两个容器围绕着立柱，并有清晰的固定。不确定这是否有帮助，可能取决于视觉设计。