CSS - Float child divs围绕其他div

Question

我想基于其他孩子div的高度动态调整我的孩子div的宽度.这很难解释,所以我只会展示一些图片......

在第一张图片中,黑色方块是我的"父"div.它包含其他高度不同的div.蓝色div的高度是静态的,但必须浮动到右侧.红色的div是我遇到的问题.如果它们出现在蓝色div的底部下方,它们应该自动调整自己的宽度.

高度较小的第二个红色div.看看最后一个div如何适应父div的宽度.

高度较大的第二个红色div.现在底部2 div的宽度都适合父div.

还有一个例子......

我不确定我是否应该使用特殊定位,或者如何构建div.如果蓝色div下方有一点空间,那就好了,我只想在红色div之间有相同的空间.

这就是我所建立的.看到黄色div隐藏在右边的蓝色div后面:http://jsfiddle.net/MVzHS/1/

#floatRight {
   width: 100px;
   height:200px;
   background-color:blue;
   position: absolute;
   right:10px;
   top:10px;
}

解决方案:http://jsfiddle.net/MVzHS/3/

Answer 1

您可以float: right在蓝色框上使用并设置overflow: hidden红色框来完成.

看看这个jsFiddle的例子.