mettendo un div prossimi due div uno sopra l'altro

Question

voglio mettere i 3 div come mostrato nella foto div numero 2 deve attaccarsi al fondo

qui è quello che ho fatto : http://jsfiddle.net/GLHur/1/

Answer 1

Questo funziona:

#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

qualcosa di simile?

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

---

Oppure il cambiamento di altezza, una volta si aggiunge il contenuto?

Answer 3

Prova questo:

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> 

Rendendo 'relativi' è possibile posizionare gli altri div div esterno all'interno utilizzando una scala assoluta. Allinea il secondo a destra, l'ultimo a destra e il fondo. Potrebbe essere necessario aggiungere altezza/altezza minima agli stili in base alle proprie esigenze.

Answer 5

vi consiglio di utilizzare tu posizione assoluta per questo posizionamento di base:

<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