4

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

4

1 回答 1

9

见：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，请阅读此处了解详细信息。

于 2011-07-20T00:10:18.500 回答