css - CSS - 在其他 div 周围浮动子 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的例子。

Answer 2

HTML

<div id="parent">

    <div id="blue">Blue content here</div>

    <div id="red">Red 1 content here
    <br>more content
    <br>more content
    <br>more content
    <br>more content
    <br>more content</div>

    <div id="red">Red 2 content</div>
    <div id="red">Red 3 content</div>

</div>

CSS

#parent
{
    border: 1px solid black;
    height: 100%;
}

#blue
{
    float: right;
    border: 1px solid blue;
    height: 100px;
    margin-left: 10px;
}

#red
{
    border: 1px solid red;
    overflow: hidden;
    margin-bottom: 10px;
}

JS Bin 在这里可用：http: //jsbin.com/irubuy/5

Answer 3

如果在源代码中您首先添加蓝色 div 并将其浮动，这应该做您想要/需要它做的事情吗？

.black {
    width:958px;
    padding:10px;
    border:1px solid #000;
    float:left;
}
.blue {
    width:248px;
    height:400px;
    border:1px solid #00f;
    float:right;
    margin:0 0 10px 30px;
}
.red {
    border:1px solid #f00;
    margin:0 0 10px;
}

http://jsfiddle.net/seemly/BTxgJ/

我在提供的小提琴中发现的唯一“问题”是 div 本身有点相交，但其中的内容按应有的方式包装。如果使用边框、背景颜色或背景图像，我不确定这将如何显示。这有帮助吗？