CSS列：宽度既流畅又灵活

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有多宽（它基于一行不同的文本）

总之，我需要：

• 两栏式布局
• 两列都占满了整个宽度
• 右边的列和它包含的文本一样宽
• 左侧的列与剩余空间一样宽

看起来我以前必须建造这个，但我被难住了

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

编辑：

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

请参见：

它将在IE7+和所有现代浏览器中工作

HTML:

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

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

---

这不是溢出：隐藏的典型用法。

列必须等高吗？需要支持哪些浏览器？不需要等高。浏览器支持…现在，让我们说webkit（有效浏览器）.太棒了！我对这种技术一无所知。那太棒了。唯一的吹毛求疵之处是它会逆转标记中的内容流，但这是一种副作用，在这种情况下我可以很高兴地接受。是的，这是一个缺点。用这种技术不可能解决这个问题。当你尝试时会出现这种疯狂：）我也需要这样做，但要求是相反的（左列优先，右列优先）。我试着摆弄小提琴，但我无法让它工作。@RTF:看，你想要这个吗@三十点对！这正是我想要的。事实上，我刚刚走了JS路线，这很好，但这绝对是可取的。如果你想把它作为我问题的答案，我会为你接受的。否则，我会用你的密码自己回答。