So erstellen Sie ein stabiles zweispaltiges Layout in HTML / CSS
Ich möchte einen Container mit zwei Spalten. Einzelheiten:
Der Kontainer
- Die Breite sollte sich auf 100% des übergeordneten Elements einstellen (leicht zu erreichen).
- Die Höhe muss so angepasst werden, dass beide Spalten enthalten sind (d. H. Ihre Höhe sollte genau der größeren Höhe der beiden Spalten entsprechen, damit kein Überlauf auftritt und Bildlaufleisten niemals angezeigt werden).
- Sollte eine Mindestgröße haben, die der doppelten Breite der linken Spalte entspricht.
Die Spalten im Allgemeinen
- Sollte von variabler Höhe sein und sich an die Höhe ihres Inhalts anpassen.
- Sollte nebeneinander liegen, so dass ihre Oberkanten in einer Linie liegen.
- Sollte das Layout nicht brechen oder untereinander umbrechen, wenn nur ein Pixel Rand, Abstand oder Rand auf eines der beiden Pixel angewendet wird, da dies äußerst instabil und unglücklich wäre.
Die linke Spalte speziell
- Muss eine feste, absolute Breite in Pixeleinheiten haben.
Die rechte Spalte speziell
- Die Breite muss den verbleibenden Raum im Container ausfüllen. Mit anderen Worten...
- Die Breite muss gleich der Breite des Containers minus der Breite der linken Spalte sein. Wenn Sie also ein DIV-Blockelement in diese Spalte einfügen, setzen Sie die Breite auf 100%, geben Sie eine Höhe von etwa 10px und geben Sie eine Hintergrundfarbe ein. Ich sehe einen 10px hohen Farbstreifen, der vom rechten Rand der linken Spalte zum rechten Rand des Containers verläuft (dh die Breite der rechten Spalte ausfüllt).
Erforderliche Stabilität
Der Container sollte in der Lage sein, die Größe (durch Ändern der Größe des Browserfensters) auf die Mindestbreite (die zuvor angegeben wurde) oder auf eine viel größere Breite zu ändern, ohne das Layout zu beschädigen. "Brechen" würde beinhalten, dass sich die Größe der linken Spalte überhaupt ändert (denken Sie daran, dass sie eine feste Pixelbreite haben soll), dass die rechte Spalte unter der linken umbrochen wird, Bildlaufleisten erscheinen und Blockelemente in der rechten Spalte nicht die gesamte Spaltenbreite einnehmen und im Allgemeinen bleibt eine der oben genannten Spezifikationen nicht erhalten.
Hintergrund
Wenn schwebende Elemente verwendet werden, sollte es keine Chance geben, dass die rechte Spalte unter der linken umgebrochen wird, dass der Container nicht beide Spalten enthält (indem ein Teil der Spalte abgeschnitten wird oder ein Teil der Spalten über die Begrenzung hinausläuft) ), oder dass Bildlaufleisten angezeigt werden (ich würde also müde sein, die Verwendung von etwas anderem als Überlauf vorzuschlagen: ausgeblendet, um die Eingrenzung schwebender Elemente auszulösen). Das Anwenden von Rahmen auf die Spalten sollte das Layout nicht unterbrechen. Der Inhalt der Spalten, insbesondere der rechten Spalte, sollte das Layout nicht sprengen.
Es scheint eine einfache tabellenbasierte Lösung zu geben, die jedoch unter allen Umständen kläglich versagt. In Safari wird beispielsweise die linke Spalte mit fester Breite verkleinert, wenn der Container zu klein wird, anstatt die angegebene Breite beizubehalten. Es scheint auch der Fall zu sein, dass sich die CSS-Breite, wenn sie auf ein TD) - Element angewendet wird, auf eine minimale Breite bezieht, sodass sie sich erweitert, wenn etwas Größeres darin platziert wird Verwendung des Tabellenlayouts: behoben, hilft nicht. Ich habe auch den Fall gesehen, dass das TD Element, das die rechte Spalte darstellt, nicht erweitert wird, um den verbleibenden Bereich auszufüllen, oder es scheint (Beispielsweise wird eine dritte Spalte, die 1 Pixel breit ist, ganz nach rechts verschoben.) Wenn Sie jedoch einen Rahmen um die rechte Spalte setzen, wird angezeigt, dass sie nur so breit ist wie der Inline-Inhalt und Elemente auf Blockebene, deren Breite auf festgelegt ist 100% füllen nicht die Breite der Spalte, sondern stimmen mit der Breite des Inline-Inhalts überein (dh die Breite des TD scheint vollständig vom Inhalt abhängig zu sein).
Eine mögliche Lösung Ich habe gesehen, ist zu komplex; Der IE6 ist mir egal, solange er in IE8, Firefox 4 und Safari 5 funktioniert.
Bitte schön:
<html>
<head>
<title>Cols</title>
<style>
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
/* Change this to whatever the width of your left column is*/
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
Hello
</div>
<div id="right">
<div style="background-color: red; height: 10px;">Hello</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>Sehen Sie es hier in Aktion: http://jsfiddle.net/FVLMX/
Ich könnte mich weniger um IE6 kümmern, solange es in IE8, Firefox 4 und Safari 5 funktioniert
Das macht mich glücklich.
Versuchen Sie dies: Live Demo
display: table ist überraschend gut. Sobald Sie sich nicht mehr für IE7 interessieren, können Sie es verwenden. Es hat nicht wirklich die üblichen Nachteile von <table>.
CSS:
#container {
background: #ccc;
display: table
}
#left, #right {
display: table-cell
}
#left {
width: 150px;
background: #f0f;
border: 5px dotted blue;
}
#right {
background: #aaa;
border: 3px solid #000
}
Stück Kuchen.
Verwenden Sie 960Grids Gehen Sie zu Automatic Layout Builder und erstellen Sie ein zweispaltiges, fließendes Design. Erstellen Sie eine linke Spalte mit der Breite der Gitter, die funktioniert. Dies ist die einzige Herausforderung bei der Verwendung von Gittern und es ist sehr einfach, wenn Sie ein Tutorial gelesen haben. Kurz gesagt, jede Spalte in einem Raster hat eine bestimmte Breite und Sie legen die Anzahl der Spalten fest, die Sie verwenden möchten. Um eine Spalte zu erhalten, die genau eine bestimmte Breite hat, müssen Sie Ihre Mathematik so anpassen, dass Ihre Spaltenbreite genau ist. Nicht zu hart.
Keine Chance zum Wickeln, weil andere diesen Kampf bereits für Sie geführt haben. Kompatibilität so weit zurück, wie Sie wahrscheinlich jemals brauchen werden. Schnell und einfach .... Jetzt herunterladen, anpassen und bereitstellen.
Voila. Gitter FTW.