CSS列：宽度均匀且灵活

Question

2011年，我被2列布局困扰了。我感到惭愧。 ;）

挑战是提出这个：

+--------------------------------------++----------------+
| This is a header with potentially    || button div     |
|                                      ||                |
| long text that will wrap most likely |+----------------+
|                                      |
| but can't go under the button to the |
|                                      |
| right                                |
+--------------------------------------+

在典型的2列布局中，将左列的边距设置为等于右边的div的边距，这没什么大不了的。然而，这个特定例子中的变量是我不知道在任何给定时间右边的div有多宽（它基于一行不同的文本。

总之，我需要：

• 2列布局
• 两列占据全宽
右侧的
• 列与其包含的文本一样宽
左侧的
• 列与剩余空间一样宽

似乎我以前必须建造这个，但我很难过。

我对CSS，JS或jQuery解决方案持开放态度。

编辑：

实际上，我已经可以看到一个相当简单的jQuery解决方案。我可以在右边抓取div的渲染宽度，然后做一些数学从父容器的宽度减去该宽度，然后设置左列的宽度相同。如果没有干净的CSS选项，那将是我的后备计划。

Answer 1

请参阅： http://jsfiddle.net/vpADP/

它可以在IE7 +和所有现代浏览器中使用。

<强> HTML：

<div id="buttonDiv">button div as wide as text</div>
<div id="leftDiv">
    left div
</div>

<强> CSS：

#leftDiv {
    overflow: hidden
}
#buttonDiv {
    float: right
}

这不是overflow: hidden，read this for details的典型用法。