Eine Lösung für gleichermaßen höhen ed Spalten ist die, die die CSS Tabular Display TechniqueAnzeigemittel zu verwenden: Tabelle Funktion. Es funktioniert für Firefox 2+, Safari 3+, Opera 9+ und IE8.
Der Code für die CSS tabellarische Wiedergabe:
Die HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
Die CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
Auch wenn es ein Problem mit der Auto ist Ausdehnung der Breite der Tischzelle einfach gelöst werden, indem ein anderes div mit der Tabellenzelle eingefügt wird und ihm eine feste Breite gegeben wird. Wie auch immer, das Überdehnen der Breite geschieht im Fall der Verwendung extrem langer Wörter (von denen ich bezweifle, dass irgendjemand ein, sagen wir, 600px langes Wort verwenden würde) oder einiger divs, deren Breite größer ist als die Breite der Tabellenzelle.
Die Faux Column Technique ist die beliebteste Lösung für dieses Problem, aber es hat einige Nachteile wie, Sie müssen die Größe des Hintergrunds gekachelt Bild ändern, wenn Sie die Spalten Größe ändern möchten, und es ist auch keine elegante Lösung.
Die OneTrueLayout Technique besteht darin, ein Padding-Bottom einer extrem großen Höhe zu erstellen und es auszuschneiden, indem Sie die echte Randposition auf die "normale logische Position" bringen, indem Sie ein negatives Rand-Unten des gleichen großen Werts anwenden und das ausblenden Ausmaß, das durch das Auffüllen mit Überlauf erzeugt wurde: Versteckt auf den Inhalts-Wrapper angewendet. Ein vereinfachtes Beispiel wäre:
Die HTML-Datei:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
Die Layering-Technik muss eine sehr saubere Lösung sein, die div absolute Positionierung beinhaltet die einen Haupt relativ positioniert Wrapper div withing. Es besteht im Wesentlichen aus einer Anzahl von Kinddivs und dem Hauptdiv. Das Hauptdiv hat zwingend Position: relativ zu seiner css Attributsammlung. Die Kinder dieses Div sind alle zwingend Position: absolut. Die Kinder müssen oben und Boden Satz und Links-Rechts Dimensionen gesetzt haben die Spalten mit jeder anderen beherbergen. Wenn wir zum Beispiel zwei Spalten haben, eine mit der Breite 100px und die andere mit 200px, wenn wir die 100px auf der linken Seite und die 200px auf der rechten Seite haben wollen, muss die linke Spalte {left: 0; rechts: 200px} und die rechte Spalte {links: 100px; rechts: 0;}
Meiner Meinung nach ist die nicht implementierte 100% Höhe innerhalb eines automatischen Höhencontainers ein großer Nachteil und das W3C sollte in Betracht ziehen, dieses Attribut zu überarbeiten.
Weitere Informationen: link1, link2, link3, link4, link5 (important)
Haben Sie eine Lösung für dieses Problem gefunden? Ich bin irgendwie in demselben Problem stecken geblieben. –
Wenn Sie eine prozentuale Breite festlegen, handelt es sich um einen Prozentsatz des übergeordneten Elements und nicht um den gesamten Bildschirm. Die einzige Ausnahme hiervon ist das Element "" ganz oben. – starbeamrainbowlabs