Wie wird ein div an der rechten Seite des Elternelements ausgerichtet, während seine vertikale Position beibehalten wird?

Question

Bitte auf diese handliche Diagramm Ich zeichnete:

div1 ‚s Höhe unbekannt ist. div3 's Breite ist flüssig; es sollte sich niemals überlappen div2. Sowohl div1 als auch div2 haben die gleiche Breite und sind über margin: auto horizontal zentriert. Wie kann ich div3 so positionieren, dass es an der rechten Seite von body ausgerichtet ist (egal, wie breit body ist), während vertikale Position mit div2 teilen? (Mit CSS)

Answer 1

Ein einfaches div Gitter den Trick tun würde:

http://jsfiddle.net/NUGPv/

<div class="con"> 
    <div class="lft">div 1</div> 
    <div class="rgt"></div> 
</div> 
<div> 
    <div class="lft">div 2</div> 
    <div class="rgt">div 3</div>  
</div>​ 

.con { overflow:hidden; } 
.lft { width:100px; height:100px; float:left; } 
.rgt { width:100px; height:100px; float:left; } 

einfach verlassen die die obere rechte Zelle leer.

Answer 2

Gefällt mir das?

HTML:

<div id='container'> 
    <div id='first'>1</div> 
    <div id='second'>2</div> 
    <div id='third'>3</div> 
</div>​ 

CSS:

#container{ 
    width: 100px; 
    margin:0 auto; 
} 

#first{ 
    border: 1px solid #ff55ff; 
} 
#second{ 
    border: 1px solid #55ff77; 
} 

#third{ 
    border: 1px solid #448855; 
} 
#first, 
#second{ 
    width: 50px; 
    clear:both; 

    float:left; 
} 

#third{ 
    clear:none; 
    float: left; 
} 

Sehen Sie diese Geige: http://jsfiddle.net/zaNvR/1/

Answer 3

HTML

<div class="div1">div1</div> 
<div class="div3">div3</div> 
<div class="div2">div2</div> 

CSS

.div1{ 
    margin:0 auto; 
    width:100px; 
    height:50px; 
    border:5px solid #995555; 
} 
.div2{ 
    width:100px; 
    margin:0 auto; 
    border:5px solid #aaaa55; 
    height:200px; 
} 
.div3{ 
    float:right; 
    width:50px; 
    height:100px; 
    border:5px solid cyan; 
} 

Demo beihttp://jsfiddle.net/XjC9z/1/