挑战在于想出这个:
+--------------------------------------++----------------+
| 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 选项，那将是我的后备计划。
最佳答案
参见: 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 .
关于javascript - CSS 列 : both fluid and flexible in width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6755576/