不使用`overflow：hidden`如何创建两个水平相邻的div，其中div2占用div1剩余的宽度空间

Question

我想创建一个包含2个水平div的布局，遵循以下规则：

1. #left在宽度上有先例（调整宽度与内容的大小），而#right占据了右边的剩余宽度
2. 由于下拉菜单而未使用overflow:hidden

我创建了这个小提琴来演示这个问题： http://jsfiddle.net/7GcRD/ 。它使用#right{overflow:hidden;}来演示我想要它的样子。要显示您的解决方案有效，您需要从示例中的CSS中删除#right{overflow:hidden;}。

尽管阅读了这两个资源，但我无法解决这个问题：

1. http://colinaarts.com/articles/the-magic-of-overflow-hidden/
2. http://www.w3.org/TR/CSS21/visuren.html#block-formatting

这些建议导致全部宽度不被右侧 div占用，或导致滚动条出现在右侧 div中。

Answer 1

尝试使用此尺寸：http://jsfiddle.net/designbymichael/VnLGX/1/

它使用jQuery动态检测左框的宽度，即使在更改窗口大小时也是如此，并相应地调整右框。您也可以将该函数用于页面中的任何其他事件侦听器。

请注意，我还在左右框中添加了一个容器div，删除了浮动（我们不应该再关心它了），将宽度更改为auto，然后使用绝对值定位合适的盒子。

以下是我用来评估盒子宽度并相应调整的功能：

function adjustBoxes() {
   var paddingWidth = 10;  // set this to adjust distance between boxes
   var leftWidth = $('#left').width();  // get left box width
   var docWidth = $(document).width();  // get document width
   var difference = docWidth - leftWidth; // set the difference
    $('#right').width(difference - paddingWidth);
}