Frage

Hier ist mein Szenario.Ich habe ein Container-Div, das (n) untergeordnete Elemente enthält.Nehmen wir für diesen Fall an, dass das Container-Div zwei Divs enthält:

<div id="container">
    <div id="col1">
        Stuff in col1
    </div>
    <div id="col2">
        Stuff in col2
    </div>
</div>

Die Container-Div wird ein Prozentsatz des Ansichtsfensters sein, sagen wir 80 %.Was ich nun suche, ist, dass diese beiden inneren Divs (col1 und col2) in einer Linie zueinander stehen und den gleichen Platz beanspruchen.Das Ergebnis sollte also etwa so aussehen:

+-------------- container -------------+
|  +---- col1 ----+  +---- col2 ----+  |
|  | stuff in     |  | stuff in     |  |
|  | col1         |  | col2         |  |
|  +--------------+  +--------------+  |
+--------------------------------------+  

Oder wenn die Containerbreite geändert wird, sollte dies zu etwa diesem Ergebnis führen:

+------------------------------ container -----------------------------+
|  +------------ col1 ------------+  +------------ col2 ------------+  |
|  | stuff in col1                |  | stuff in col2                |  |
|  | stuff in col1                |  | stuff in col2                |  |
|  +------------------------------+  +------------------------------+  |
+----------------------------------------------------------------------+

Die inneren Divs sind immer gleich breit und haben einen gewissen Abstand voneinander.Dies ähnelt einem Tabellenlayout, aber ich würde nach Möglichkeit lieber keine Tabellen verwenden.Ich habe verschiedene Techniken wie Floating und die Inline-Anzeige der Divs ausprobiert, ohne Erfolg.Sie scheinen nie genau richtig ausgerichtet zu sein.

War es hilfreich?

Lösung

Tabellenzellen könnten automatisch gedehnt werden.Mit ist das nicht ganz möglich div, Daher müssen Sie für jede Spalte manuell die entsprechende Breite angeben.Zum Beispiel:

#col1, #col2 {
    float: left;
    width: 50%;
}

Andere Tipps

Erstellen Sie mit col1 und col2 Spannen (keine Divs).

vertical-align:top
display:inline-block
width:50%

Offensichtlich (passen Sie die Breite an, um Ihre Ränder/Abstände zu berücksichtigen.und es wird empfohlen, dass Sie Prozentsätze für Ränder/Abstände verwenden, damit diese knapp 100 % ergeben, siehe:http://ejohn.org/blog/sub-pixel-problems-in-css/)

Meine bevorzugte Lösung

Positionierung relativ zum Außenbehälter verwenden:

#container, #container > div  
{
    position: relative;
}

#col1  
{
     left: 2%; /* your margin */
}

#col2  
{
     right: 2%;
}

#container > div 
{
     width: 47%;
}

Beachten Sie, dass Sie in der Mitte ungefähr die gleichen 2 % belassen.Der #col1 Und #col2 sollte jetzt ausgerichtet sein.

Andere Lösungen

Mit CSS3:verwenden column-count: 2 und brechen Sie die Spalte nach der ersten ab div.

Wenn Sie wirklich Lust zum Schweben haben, tun Sie es nur #col1 { float: left; width: 50%; }

#container{
overflow: hidden
} 

#col1, #col2 {
    float: left;
    width: 50%;
}

Vielleicht die Verwendung von display: table; würde helfen? http://jsfiddle.net/g4dGz/119/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top