Wie verschiebt man ein Bild links vom Text, ohne es umzubrechen?

CSS Float: Ein Bild links vom Text schweben lassen

In diesem Szenario möchten Sie ein Layout mit einem Miniaturbild erreichen schwebt links vom Textinhalt, ohne dass der Text das Bild umschließt. Hier ist eine ausführliche Erklärung, wie Sie dies mit HTML und CSS erreichen:

HTML-Struktur:

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

CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    overflow: auto
}
.post-thumb {
    float: left
}
.post-thumb img {
    display: block
}
.post-content {
    margin-left: 210px
}
.post-title {
    font-weight: bold;
    font-size: 200%
}

Erklärung:

• Der .post-Container enthält sowohl die Miniaturansicht als auch den Textinhalt.
• .post-thumb verschiebt das Bild in den links vom Container.
• Einstellung display: block auf dem Bild stellt sicher, dass es die gesamte Breite des .post-thumb-Containers einnimmt.
• .post-content wendet einen linken Rand von 210 Pixel an um sicherzustellen, dass zwischen dem Bild und dem Text genügend Platz ist.
• .post-title formatiert den Beitragstitel fett und mit einer größeren Schriftgröße.

Das obige ist der detaillierte Inhalt vonWie verschiebt man ein Bild links vom Text, ohne es umzubrechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!