如何让 2 个 HTML 块元素（具有不同的宽度）“内联”，覆盖整个父元素？

Question

我怎样才能有2个块元素（“块”，因为我想将背景图像应用到其中之一）对齐（一个在左边，一个在右边），其中：

• 左侧元素的宽度由文本定义它包含的行（可以变化...）
• 右侧元素的宽度占据了总宽度的其余部分
• 总宽度是固定的（由某些父元素给出）

像这样：

<div id="some_parent_element_with_fixed_width">
    <div class="left">Here should be some text of varying length...</div>
    <div class="right">Here should be displayed a x-repeat background image on the entire remaining width...</div>
</div>

非常感谢任何跨浏览器解决方案！ 汤姆

Answer 1

在左侧元素上使用 float:left ，这将使其仅占用其内容的大小。在右侧元素上使用 overflow:hidden ，这将自动使用其余空间，因为块元素的 width 属性默认为 auto.

.left { float: left; }
.right { overflow: hidden; background: url(someimage.gif) repeat-x; }