html - divを次の2つのdivの上に配置する

Question

写真のように3つのdivを配置したい div番号2は下部に固定する必要があります

これが私がしたことです：http： //jsfiddle.net/GLHur/1/

Answer 1

これを試して：

http://jsfiddle.net/GLHur/18/

<div class="con">
    <div id="div3"></div>
    <div id="div1_2">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</div>

#div3{height:100px;width:100px;border: solid 1px #000; display:inline-block; background:red;}

#div1{height:30px;width:100px;border: solid 1px #000; position:absolute; top:0; background:blue;}
#div2{height:20px;width:100px;border: solid 1px #000; position:absolute; bottom:0; background:green;}

#div1_2{display:inline-block; vertical-align:top;}


.con { position:relative; }​

Answer 2

これは機能します：

    #div3{height:100px;width:100px;border: solid 1px #000;
display:inline-block;}
    #div1{height:30px;width:100px;border: solid 1px #000;}
#div2{height:20px;width:100px;border: solid 1px #000; position: absolute; bottom: 0}
#div1_2{display:inline-block;vertical-align:top; position: relative; height: 100px;}

Answer 3

このようなもの？

http://jsfiddle.net/GLHur/6/

---

または、コンテンツを追加すると高さが変わりますか？

Answer 4

この基本的な位置付けには絶対位置を使用することをお勧めします。

<div id="content">
    <div id="div3"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

。

#content { position: relative; height: 100px; width: 220px; }

#div1{ position: absolute; top: 0; right: 0;   height:30px;  width:100px; background: blue; }
#div2{ position: absolute; bottom:0; right: 0; height:20px;  width:100px; background: green; }
#div3{ position: absolute; top: 0; left: 0;    height:100px; width:100px; background: red; }

jsFiddle

Answer 5

<div style="position: relative;">
    <div style="height: 100%;"> </div>
    <div style="position: absolute; right: 0px;"> </div>
    <div style="position: absolute; right: 0px; bottom: 0px;"> </div>
</div>

外側のdivを「相対」にすることで、絶対尺度を使用して他のdivを内側に配置できます。2つ目を右に、最後の1つを右と下に揃えます。必要に応じて、スタイルに高さ/最小高さを追加する必要がある場合があります。