html - Div AutoResize（好像它是空的）

Question

我有一排div。左侧的所有 div 都会调整大小以适应其内容。我希望左侧的 div 也可以调整大小以适应其内容，但我希望它服从于右侧的 div。因此，如果右侧的 div 变得非常大，左侧的 div 将切断其内容（无论它有多长）并缩小到适合右侧 div 的大小。

这可以查找左侧 div 是否为空，但如果其中包含内容，则不会调整大小。

有谁知道这样做的方法？

Answer 1

http://jsfiddle.net/6WuVz/

具有重新排序元素的 HTML：

<div class="r">Right 1</div>
<div class="r">Right 2</div>
<div class="l">Left</div>

CSS：

.r {
    float: right;
}

.l {
    overflow: hidden; /* turn into a "Block Formatting Context" */
}

阅读有关 BFC 如何占用浮点数剩余空间的更多信息：

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

旧 IE 的 BFC：

display: block; overflow:hidden; zoom:1; position:relative;

Answer 2

在计算完其他 div 大小后，设置页面加载时的宽度和/或高度。使用 jquery：

$( function() {
   $("#leftdiv").width($("#rightdiv").width()) 
   $("#leftdiv").height($("#rightdiv").height());
});