đặt một div hai divs tiếp theo trên mỗi khác

Question

tôi muốn đặt 3 divs như trong bức ảnh div số 2 phải dính vào đáy

đây là những gì tôi đã làm : http://jsfiddle.net/GLHur/1/

Answer 1

này hoạt động:

#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 2

Một cái gì đó như thế này?

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

---

Hoặc không thay đổi chiều cao khi bạn thêm nội dung?

Answer 3

Hãy thử điều này:

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 4

<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> 

Bằng cách làm 'tương đối' bạn có thể xác định vị trí các divs khác div ngoài trong việc sử dụng một quy mô tuyệt đối. Căn phải cái thứ hai bên phải, cái cuối cùng bên phải và đáy. Bạn có thể phải thêm chiều cao/phút chiều cao cho các kiểu theo nhu cầu của bạn.

Answer 5

tôi đề nghị bạn tu sử dụng vị trí tuyệt đối cho định vị cơ bản này:

<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