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" */
}

阅读更多关于BFCs如何利用浮动留下的剩余空间的更多信息：

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