Eine beispielhafte Einführung in die Layoutmethode des linken Bildes und des rechten Textes unter Verwendung des Table-Cell-Attributs von CSS

In einigen Fällen ist die Verwendung von Tabellenzellen einfacher und effektiver als Float, z. B. beim Schreiben horizontaler Menüs. Hier werfen wir einen Blick auf die detaillierte Erklärung der Layoutmethode für die Verwendung des Tabellenzellenattributs CSS zur Realisierung des linken Bildes und des rechten Textes:

Beim horizontalen Anordnen von Elementen werden im Allgemeinen Float, display:inline-block und andere Methoden verwendet. Wir können es auch einfach implementieren, indem wir table-cell verwenden, um eine horizontale Anordnung zu erstellen (hahaha, das ist etwas weit hergeholt)

Beide schweben und klar: Beide können weggelassen werden.

2. Auch wenn Rand und Polsterung verwendet werden, wird der Rand nicht verschoben.
clear:both kann durch display:inline-block ersetzt werden. Das Wichtigste an display:table-cell ist, es vertikal zu zentrieren.
Außerdem führen Polsterung und Rand beim responsiven Design nicht dazu, dass der Stil über den Rand hinausragt. Keine Berechnung der Breiten und keine Verwendung der Boxgröße mehr.

Horizontale Anordnung durch Tabellenzelle

Lassen Sie uns zunächst die grundlegende Schreibmethode der Tabellenzelle vorstellen
Als Beispiel erstellen wir eine linke Anordnung, die auf allgemeinen Websites angezeigt wird

CSS-Teil:

.box{width:60%; margin:60px auto 0; padding:20px; background:#f5f5f5;}   
.content{display:table-cell; *display:inline-block;}

                                                               

Das obige ist der detaillierte Inhalt vonEine beispielhafte Einführung in die Layoutmethode des linken Bildes und des rechten Textes unter Verwendung des Table-Cell-Attributs von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!