Wie div Container vertikal mit CSS ausrichten?

Question

Ich suche nach einer allgemeinen und vollständigen Lösung für dieses allgemeine Problem! Ich habe HTML-Code wie folgt aus:

<div id="CONTAINER"> 
    <div id="CONTAINER_LEFT"></div> 
    <div id="CONTAINER_RIGHT"></div> 
    <div id="CONTAINER_CENTER"></div> 
</div> 

ich CSS schreiben möchte, die mir die inneren div-Elemente können vertikal ausrichten so ihre Oberkanten sind in Zeile. Andere Überlegungen:

1. Die linken und rechten Behälter haben eine feste Breite.
2. Der mittlere Container muss die verbleibende Breite zwischen den linken und rechten Containern füllen.
3. Die Höhe jedes inneren Behälters hängt von seinem Inhalt ab und so variiert zwischen den Behältern.
4. Keine Überlappung ist beabsichtigt, das Ziel ist etwas wie das folgende Bild.
5. Die Höhe des äußeren Behälters sollte der größten Höhe der inneren Behälter entsprechen, wenn es möglich ist !!

Die Farben sind nur die Idee für die Anzeige!

Ich verwendete "float: links;" und "schweben: richtig;" Eigenschaften für den rechten und den linken Container, aber wenn der Container Center zu viel Inhalt enthält, füllt der Bereich dieses Containers den Raum unterhalb der floated Elemente! Außerdem benötige ich eine Fußzeile unterhalb des Wurzelbehälters mit einer Breite von 100%; Jede Lösung sollte dies berücksichtigen!

Answer 1

Dies scheint unter IE7-9, FF, Chrome, Safari und Opera die einfachste Lösung und arbeitet zu sein:

.container { 
    overflow: hidden; 
    background: grey; 
} 

.left { 
    float: left; 
    width: 200px; 
    background: red; 
} 

.middle { 
    margin-left: 200px; 
    margin-right: 200px; 
    background: green; 
} 

.right { 
    float: right; 
    width: 200px; 
    background: blue; 
} 

Answer 2

Wenn Sie beabsichtigen, dass der (mittlere) Container den verfügbaren Platz darunter füllt, suchen Sie wahrscheinlich nach der faux columns-Technik.

Die Idee ist, dass Sie nicht versuchen, die Höhe der Spalten zu steuern, sondern stattdessen ein Hintergrundbild anwenden, um Spalten gleicher Länge zu simulieren.

Gehen Sie zu dem berühmten article on a list apart on faux columns und lesen Sie weiter, um dies zu implementieren, ist es ziemlich einfach.

Answer 3

Das ist einfach genug zu tun - http://jsfiddle.net/spacebeers/dBvXY/2/

Dies verwendet die gleiche Technik, die hier skizzierte Spalten Höhe CSS - http://www.ejeliot.com/blog/61

Sie setzen Ihre Hauptsäulen ein massives Bodenpolster haben und einen gleichen negativen unteren Rand. In Ihrem Container muss der Überlauf auf "Versteckt" gesetzt sein. Passen Sie die Zahlen entsprechend an, aber um Brain Fantana zu zitieren "60% der Zeit funktioniert es jedes Mal".

.container { 
    width: 100%; 
    overflow: hidden;  
} 

.left{ 
    float: left; 
    padding: 0px 10px 0px 0px; 
    width: 90px; 
    background: red; 
} 

.middle{ 
    top: 10px; 
    margin-left: 100px; 
    margin-right: 100px; 
    background: green; 
    margin-bottom: -2000px; 
    padding-bottom: 2000px; 
} 

.right{ 
    float: right; 
    background: blue; 
    padding: 0px 10px 0px 10px; 
    width: 90px; 
}​ 

<div class="container"> 
    <div class="left"> 
     Some content for the left column. 
    </div> 
    <div class="right"> 
     Some content for the right column. 
    </div> 
    <div class="middle"> 
     Some content for the middle column. 
    </div> 
</div> 

Answer 4

Hallo können Sie alle mit nach Ihrem Layout als ähnliche css

.wraper{ 
    display:table; 
    margin:0 auto; 
    overflow:hidden; 
} 
.left{ 
    display:table-cell; 
    background:red; 
} 

.center{ 
    display:table-cell; 
    margin:0 auto; 
    width:200px; 
    background:green; 
    height:50px; 
} 


.right{ 
    display:table-cell; 
    background:yellow; 
} 

​ 

HTML

definieren 210

<div class="wraper"> 


    <div class="left">left</div> 
    <div class="center">Center</div> 
    <div class="right">right</div> 

</div> 
    ​ 

Live-Demo hier http://jsfiddle.net/rohitazad/WeQN2/

Answer 5

hallo bitte versuchen Sie diesen Code

HTML

<div id="left"></div> 
<div id="right"></div> 
<div id="center">here you van place your text</div> 

CSS

#left + #right + #center { 
    MARGIN-LEFT: 203px; 
} 
#left + #content { 
    MARGIN-LEFT: 203px; 
} 
#right + #center { 
    MARGIN-RIGHT: 203px 
} 

#left 
{ 
    float:left; 
    width:200px; 
    background:#00CC99; 
    height:300px; 
} 
#right 
{ 
    float: right; 
    width:200px; 
    background:#33FF66; 
    height:400px; 
} 
#center 
{ 
    height:550px; 
    padding:10px; 
    background:#006666; 
    color:#fff; 
}