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 如何占用 float 剩余空间的信息:

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

旧 IE 的 BFC:

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