Question

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

例如：

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

编辑----＆GT;

更多信息：

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

启动您的发动机！（其次是轮胎痕迹图案）转弯时注意！（其次是轮胎痕迹图案）

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

Answer 1

你可以浮动#item1而不是浮动#item2，如下所示：

http://jsfiddle.net/CevQH/1/

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

如果您在其下方放置项目，则应在clear:left之后的第一个项目中添加#item2

Answer 2

如果您可以确定一列总是具有更高的高度，则可以使该列不受限制并绝对定位第二列。第二列将保持容器（顶部和底部需要position: relative）。

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

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

在这里摆弄：http://jsfiddle.net/neilheinrich/5mRDM/

Answer 3

您可以使用flexbox.Chris非常好地解释here

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

3 个答案: