Layout div_CSS/HTML wie eine Tabelle

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Das Folgende ist, was ich übersetzt habe, eine kostenlose Übersetzung basierend auf meinem Verständnis des Artikels, ich habe nichts an der Übersetzung zu bemängeln, mein Zweck besteht nur darin, diese CSS-Technik zu vermitteln

Viele Webdesigner platzieren gerne zwei oder mehr Container mit gleicher Höhe nebeneinander und zeigen jeden Container darin an Der Inhalt eines Containers ähnelt einer Zelle in einem klassischen Tabellenlayout, die die Position mehrerer Spalten steuert. Außerdem möchten Sie, dass der Inhalt des Containers zentriert oder oben ausgerichtet ist.
Aber Sie möchten keine Tabellen zur Implementierung verwenden. Was sollten Sie also tun? Es gibt viele Möglichkeiten, dies zu implementieren, einschließlich der Implementierung auf der Grundlage visueller Illusionen, der Verwendung der JS-Steuerung, um die Höhen anzugleichen, und der Verwendung einer Methode zum Ausblenden des Überlaufteils des Containers und der Kombination der negativen unteren Grenze der Spalte und der positiven inneren Grenze Patch zur Lösung des Problems der gleichen Spaltenhöhe.
Tatsächlich gibt es eine einfache Methode, die durch die Verwendung von display:table, display:table-row und display:table-cell erreicht werden kann. Container mit kleiner Höhe passen sich an solche mit relativ hoher Höhe an, aber IE unterstützt diese Attribute nicht, wir müssen dem IE vorerst nicht die Schuld geben, ich glaube, dass es in Zukunft verbessert wird. Hier habe ich ein Modell gemacht.

Erster Blick auf die Struktur von xhtml:

Ohne Erklärung ist es sehr einfach zu verstehen, aber hier ist eine Tabellenstruktur. Ist sie sehr ähnlich?














Das Folgende ist das CSS:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .two {

}

Erläuterung:
1.dispaly:table; Es soll „layer.equal“ verwendet werden als Blockebene Die Tabellenanzeige des Elements soll es als Tabelle behandeln
2.border-collapse:separate; der Rand ist unabhängig, genau wie zuvor hat die Tabelle Zellen zusammengeführt
3.display:table-row ; Behandle .row als Tabellenzeile tr display
4.display:table-cell; zeige das untergeordnete div von .row als Tabellenzelle td an
Border- Hier wird auch „spacing:10px“ verwendet, um zwischen mehreren Boxen zu unterscheiden. Wie oben erwähnt, kann es unter IE nicht normal angezeigt werden, kann aber unter: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, angezeigt werden. Camino 0.8b und Netscape 7.1 nach dem Testen. Perfekte Anzeige.Jetzt ist die ganze Mission beendet.