CSS simuliert Float, um den Effekt eines zentrierten Textes zu erzielen, der das Bild links und rechts umgibt

Was ist Textumbruch um Bilder? Dies ist die Auswirkung der folgenden Abbildung:

Der CSS-Code des Effekts kann hier eingesehen werden

In CSS gibt es keine Einstellung wie float:center, aber wir können mit einigen Tricks einen ähnlichen Effekt simulieren.

Freunde fragen oft: Es gibt Float: Left und Right, warum gibt es kein Float: Center? Meine Antwort ist:

1. text-align: center kann bereits den Zentriereffekt von Inline-Elementen erzielen

2. Lassen Sie den Text in einer Zeile um beide Seiten des Bildes laufen. Dieser Effekt ist für den Browser sehr schwierig zu verarbeiten. Es sei denn, Sie zeigen den Text als zwei Spalten an, aber das ist eine andere Frage

3. Wenn es um Text geht, sollte float eigentlich „Umbruch“ heißen. Float:left bedeutet „Platziere dieses Element auf der linken Seite des Containers und umbruche alles rechts davon.“ In diesem Fall ist das von uns besprochene float:center eigentlich ein Umbruch auf beiden Seiten, was eine Reihe von Problemen aufwirft, z. B. wie man die „Tiefe“ eines Elements in einem Container bestimmt.

Um den Effekt von float:center zu simulieren, teilen wir den Text durch die Erstellung von zwei Divs in zwei Spalten auf und schreiben das zentrierte Bild in das erste Div:

<div id="Behälter">
  <div id="leftcol">
    <p><img src=".../01.jpg">Kyoto liegt in der Nähe des Zentrums der Insel Honshu. Bevor die königliche Familie nach Edo zog...
  </div>
  <div id="rechte Spalte">
    <p>Aus diesem Grund zählen viele der erhaltenen Stätten Kyotos zum UNESCO-Weltkulturerbe, darunter ...
  </div>
</div>

Zuerst setzen wir die beiden Div-Elemente .leftcol und .rightcol auf display: table-cell und das Container-Element .container auf display: table:

div#Container { 
  Anzeige: Tabelle; 
  Breite: 80%;
  max-width: 900px; /* Maximale Containerbreite 900px */
  Rand: 0 automatisch;
  Zeilenhöhe: 1,5;
}
div#linkeSpalte, div#rechteSpalte { 
  Anzeige: Tabellenzelle; 
  Polsterung: 1em;
}
div#Containerbild {
  Breite: 55 %; /* Die Breite des Bildes beträgt 55 % der Breite des ersten Spalten-Divs */
  Höhe: automatisch;
}

Auf diese Weise wird der Text als zwei Spalten der Tabelle angezeigt:

Das Bild wird wie vorgesehen oben links in der ersten Spalte angezeigt, wobei seine Unterkante an der Grundlinie der ersten Textzeile ausgerichtet ist.

Wenn Sie dem Bild als Nächstes ein float:right geben, schwebt es rechts neben dem ersten div und der Text wird um die linke Seite des Bildes herumgeführt:

Bisher haben wir das traditionellste Layout implementiert: zwei Textspalten, von denen eine ein schwebendes Bild enthält.

Als Nächstes müssen wir einige Techniken verwenden, um den Effekt des Textumbruchs nach links und rechts zu erzielen.

Der erste Schritt besteht darin, das Bild um eine bestimmte Distanz nach rechts zu verschieben, indem die Eigenschaft „margin-right“ auf einen negativen Wert gesetzt wird:

div#Containerbild {
  schweben: rechts;
  Breite: 55 %;
  Höhe: automatisch;
  margin-right: -20%; /* Das Bild wird um 20 % der Breite des ersten Divs nach rechts verschoben*/
  Rand links: 20px;
  Rand unten: 20px;
}

Die Eigenschaften „margin-left“ und „margin-bottom“ legen fest, dass das Bild einen Abstand von 20 Pixeln zum Text links und darunter aufweist.

Zu diesem Zeitpunkt überlappt das Bild den Text in der zweiten Spalte:

Der zweite Schritt besteht darin, im zweiten Div durch das Pseudoelement :before ein Element zu erzeugen. Es enthält keinen Inhalt und wird nur verwendet, um den Text nach dem Floaten umfließen zu lassen.

div#rightcol:vor { 
  Inhalt: " "; 
  schweben: links; 
  Breite: 25 %;
  Polsterung oben: 102%;
}

Dieses Pseudoelement ist so eingestellt, dass es links schwebt, und seine Breite plus die Distanz, um die das Bild nach rechts verschoben wird, entspricht genau der Breite des Bildes.

Die Eigenschaft „padding-top“ wird etwas größer eingestellt, sodass zwischen Text und Bild etwas Platz ist.

Wenn wir diesem Pseudoelement ohne Inhalt einen roten Rahmen hinzufügen, können wir seine Position sehen:

Die eigentliche Funktion dieses leeren Pseudoelements besteht darin, den Text, der sich mit dem Bild überlappt, zu trennen und ihn umzufließen. Dadurch wird der Effekt simuliert, dass der Text auf der rechten Seite das Bild umfließt, während der Text tatsächlich um das Pseudoelement umfließt.

Diese Umbruchmethode unterliegt einer Einschränkung: Das Bild muss sich oben im Div befinden und wir können das Bild nicht beliebig in vertikaler Richtung platzieren.

Zum Schluss noch einige verschönernde Stile und adaptive Codes festlegen und schon ist der Endeffekt erreicht:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.