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,请阅读详细信息.