Verwenden Sie div, um eine tabellenartige Layoutmethode zu implementieren_Erfahrungsaustausch

Viele Webdesigner platzieren gerne zwei oder mehr Container nebeneinander auf gleicher Höhe und zeigen den Inhalt jedes Containers darin an, so wie die Zellen in einem klassischen Tabellenlayout die Positionen mehrerer Spalten steuern zentriert oder oben ausgerichtet.
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 geringer Höhe passen sich an solche mit relativ hoher Höhe an, aber IE unterstützt diese Attribute nicht, wir müssen dem IE im Moment nicht die Schuld geben, ich glaube, dass es in Zukunft verbessert wird. Hier habe ich ein Modell gemacht.

Schauen wir uns zunächst die Struktur von xhtml an:

Es ist ohne Erklärung leicht 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; Lassen Sie die Ebene .equal als Tabelle anzeigen von Elementen auf Blockebene, also als Tabelle behandeln
2.border-collapse:separate; Der Rand ist unabhängig, genau wie die Tabelle vor dem Zusammenführen der Zellen
3.display:table-row; .row als Tabellenzeile anzeigen tr
4.display:table-cell; das untergeordnete div von .row als Tabellenzelle anzeigen td
5. Dann die Breite definieren

Randabstand: 10px; wird hier auch verwendet, um mehrere Boxen zu unterscheiden. Wie oben erwähnt, kann es unter IE nicht normal angezeigt werden, wohl aber unter: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b , und Netscape 7.1 lässt sich nach dem Test einwandfrei darstellen