Wie positioniere ich ein Bild links vom Text, ohne es mithilfe von CSS-Floats umzubrechen?

Verwenden von CSS-Floats, um ein Bild links vom Text zu positionieren

Beim Entwerfen einer Webseite kann es vorkommen, dass Sie möchten, dass ein Bild links vom Text angezeigt wird Text, ohne dass er den Text umschließt. Die Verwendung von CSS-Floats bietet hierfür eine Lösung.

HTML

In Ihrem bereitgestellten HTML gibt es drei wesentliche Elemente:

• .post-container: Enthält das Gesamtbild Postfach.
• .post-thumb: Enthält das Bild, das Sie links verschieben möchten.
• .post-content: Enthält den Beitragstitel und die Beschreibung.

<div class="post-container">
    <div class="post-thumb"><img src="thumb.jpg" /></div>
    <div class="post-title">Post title</div>
    <div class="post-content"><p>post description...</p></div>
</div>

CSS

Um das gewünschte Layout zu erreichen, wenden Sie die folgenden CSS-Eigenschaften an:

• .post-container: Legen Sie overflow: auto fest, um den Inhalt zuzulassen nach innen, um sich über die Grenzen des Containers hinaus auszudehnen.
• .post-thumb: Legen Sie float: left fest, um das Bild nach links zu verschieben.
• .post-thumb img: Legen Sie den Anzeigeblock fest, um sicherzustellen, dass das Bild in seinem eigenen Bereich angezeigt wird.
• .post-content: Legen Sie einen Wert für den linken Rand fest, der größer als die Bildbreite ist (z. B. 210px), um den Text rechts vom Bild zu positionieren.

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

.post-content {
    margin-left: 210px;
}

Wichtige Hinweise

• Um zu vermeiden, dass das Bild den Text umhüllt, stellen Sie sicher, dass der Rand- Der linke Wert für .post-content ist breiter als die Bildbreite.
• Wenn Sie eine Kopfzeile oben im Postfeld wünschen, sollten Sie die Verwendung eines

  in Betracht ziehen. Tag innerhalb von .post-content.

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Bild links vom Text, ohne es mithilfe von CSS-Floats umzubrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!