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 选项,那将是我的后备计划。