Das Folgende ist, was ich übersetzt habe, basierend auf meinem Verständnis des Artikels. Bitte bemängeln Sie nicht die Übersetzung. Mein Zweck ist nur, diese CSS-Fähigkeit zu vermitteln.
Viele Webdesigner platzieren gerne zwei oder mehr Container auf gleicher Höhe nebeneinander und zeigen den Inhalt jedes Containers darin an, genau wie die Zellen in einem klassischen Tabellenlayout, die die Positionen mehrerer Spalten steuern. Sie schätzen auch die Bequemlichkeit von Containern. Der Inhalt wird zentriert oder oben ausgerichtet angezeigt.
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 Container mit relativ hoher Höhe an, der IE unterstützt dies jedoch nicht Dieses Attribut geben wir dem IE im Moment nicht die Schuld, ich glaube, es wird sich in Zukunft verbessern. Hier habe ich ein Modell gemacht.
Schauen Sie sich zunächst die Struktur von xhtml an:
<div class=equal>
<div class=row>
<div class=one></div>
<div class=two></div>
<div class=drei></div>
</div>
</div>
Ohne Erklärung ist es sehr einfach zu verstehen, aber hier ist eine Tabellenstruktur. Ist sie sehr ähnlich?
<Tabelle>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Hier ist das CSS:
.gleich {
Anzeige:Tabelle;
border-collapse:separate;
}
.Reihe {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
Breite:200px;
}
.row .two {
Breite:200px;
}
.row .drei {
}
erklären:1.dispaly:table; Lassen Sie Layer.equal als Tabelle von Elementen auf Blockebene anzeigen, dh behandeln Sie es als Tabelle
2.border-collapse:separate; Der Rand ist unabhängig, genau wie vor der Zusammenführung der Tabellenzellen.
3.display:table-row; zeigt .row als Tabellenzeile an
4.display:table-cell; zeigt das untergeordnete div von .row als Tabellenzelle td an
5. Anschließend legen Sie die Breite fest
Border-spacing:10px; wird hier auch verwendet, um mehrere Boxen zu unterscheiden. Wie oben erwähnt, kann es unter IE nicht normal angezeigt werden, aber es ist: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8 b und Netscape 7.1 können nach dem Test einwandfrei dargestellt werden.