css - 不使用“溢出：隐藏”如何创建两个水平相邻的 div，其中 div2 占用 div1 剩余的宽度空间

Question

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

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

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

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

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，删除了浮动（我们不必再关心它了），将宽度更改为自动，然后对右框使用绝对定位。

这是我用来评估框宽度并进行相应调整的函数：

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);
}