Wie vertikal ausrichten, div-Container mit CSS?

Ich bin auf der Suche für eine Allgemeine und vollständige Lösung zu diesem gemeinsamen problem! Ich habe HTML-code wie dieser:

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

Möchte ich schreiben, CSS, lässt mich ausrichten, dass die inneren div-Elemente vertikal so Ihre oberen Kanten im Einklang. Weitere überlegungen:

Den Linken und Rechten Container eine Feste Breite haben.
Die Center-container füllen muss die Verbleibende Breite zwischen dem Linken und
Richtigen Container.
Die Höhe jeder innere container, hängt von seinem Inhalt
und so variiert zwischen den Behältern.
Keine überlappung vorgesehen ist, das Ziel ist so etwas wie die folgenden
Bild.
Der Höhe des äußeren Behälters sollte gleich der größten Höhe
der innere Behälter, wenn es möglich ist!!

Die Farben sind nur für die Darstellung der Idee!

Habe ich "float: left;" und "float: right;" Eigenschaften für den Rechten und Linken Container, aber wenn der Center container hat zu viel Inhalt, der Bereich der container füllt den Raum unterhalb der gefloateten Elemente! Auch ich brauche eine Fußzeile unterhalb der root-container mit der Breite von 100%; jede Lösung, sollte dies berücksichtigen!

Ihre ausgewählte Antwort wird nicht geben Sie die gleiche Höhe haben wie die Spalten.

InformationsquelleAutor moorara | 2012-04-02

Scheint dies die einfachste Lösung und funktioniert unter IE7-9, FF, Chrome, Safari und Opera:

.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;
}

InformationsquelleAutor gitaarik

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

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

Legen Sie Ihre wichtigsten Säulen haben einen massiven Boden Polsterung und eine gleiche negative unteren Rand. Ihr container braucht overflow auf hidden gesetzt. Passen Sie die zahlen entsprechend, aber zitieren Gehirn Fantana "60% der Zeit, die es funktioniert 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>

InformationsquelleAutor SpaceBeers

Hallo können Sie definieren, dass alle anderen nach Ihrem layout
wie diese

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

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

Dies hat leider nicht funktioniert gut im IE7, weil IE7 nicht unterstützt display: table-cell; option in CSS.
gehen diese url sweetsindesign.com/blog/ie-hack-for-display-table-cell
ich m erstellen Sie neue fiddle überprüfen Sie das jsfiddle.net/rohitazad/zzw2Q

InformationsquelleAutor Rohit Azad

Hallo bitte versuchen, 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;
}

InformationsquelleAutor Kamal

0

Wenn Sie beabsichtigen, für die (center -) container, um den verfügbaren Platz auszufüllen darunter, Sie sind wahrscheinlich auf der Suche nach der faux columns Technik.

Die Idee ist, dass Sie nicht versuchen, und die Kontrolle der Spalten Höhe, aber stattdessen wenden Sie ein Hintergrundbild zu simulieren gleiche Länge der Spalten.

Den berühmten Artikel auf a list apart über faux columns und Lesen Sie weiter, um dies zu implementieren, ist es ziemlich einfach.

Sie können dies tun, mit reinem CSS (siehe mein Beispiel). Es ist alles schön erklärt hier - ejeliot.com/blog/61
nett, ich werde Lesen. dies scheint interessant.

InformationsquelleAutor Eliran Malka

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.