css - CSS - 他の div の周りに子 div を配置する

Question

他の子 div の高さに基づいて、子 div の幅を動的に調整したいと考えています。説明が難しいので写真だけで・・・。

この最初の画像では、黒い四角が私の「親」div です。高さが異なる他の div が含まれています。青の div の高さは静的ですが、右にフロートする必要があります。赤い div は、私が問題を抱えているものです。青い div の下にある場合は、独自の幅を自動的に調整する必要があります。

高さが小さい 2 番目の赤い div。最後の div が親 div の幅にどのように収まるかを確認してください。

高さの大きい 2 番目の赤い div。これで、下の 2 つの div の幅が両方とも親 div に収まるようになりました。

もう1つの例...

特別な配置を使用する必要があるかどうか、または 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自体が互いに交差していることですが、それらのコンテンツは必要に応じて折り返されます。境界線、背景色、または背景画像を使用している場合、これがどのように表示されるかはわかりません。これはまったく役に立ちますか？