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的例子。

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本身彼此相交，但是它們內容的內容應該是它們應該包含的。 如果使用邊框，背景顏色或背景圖像，我不確定如何顯示。 這有幫助嗎？