Wie kann ich in HTML/CSS Text um ein Bild wickeln?

Textumbruch um Bilder in HTML/CSS

Frage:

Können wir einen Textblock erstellen, der ein umschließt? Bild wie das Bild vorausgesetzt?

Antwort:

Absolut! Um diesen Effekt zu erzielen, ist es notwendig, den Bildcontainer schweben zu lassen. So geht's:

HTML-Code:

<div>

CSS-Code:

#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

Ergebnis:

Die feste Breite des Containers (400px ) und gelber Hintergrund erzeugen einen Textblock. Das schwebende Bild (#floated) mit einer Breite von 150 Pixeln und einem roten Hintergrund wird auf der linken Seite positioniert, sodass der Text darum herumfließen kann.

Interaktives Beispiel:

Eine Live-Demonstration dieser Technik finden Sie auf JSFiddle: http://jsfiddle.net/kYDgL/

Das obige ist der detaillierte Inhalt vonWie kann ich in HTML/CSS Text um ein Bild wickeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!