Wie kann verhindert werden, dass Text in CSS um schwebende Bilder gewickelt wird?

Floating-Bilder und Text in CSS

Sie wünschen sich ein Layout, bei dem Miniaturansichten links vom Text schweben und gleichzeitig verhindert wird, dass Text um die Bilder herumfließt . So können Sie dies erreichen:

HTML-Struktur:

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

CSS-Styling:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    display: flex; /* Create a flexible layout container */
}
.post-thumb {
    float: left;
    margin-right: 20px; /* Create some spacing between the thumbnail and text */
}
.post-thumb img {
    display: block;
}
.post-content {
    margin-left: auto; /* Push the text to the right side of the container */
}
.post-title {
    font-weight: bold;
    font-size: 200%;
}

Von Mit CSSs display:flex erstellen wir einen flexiblen Container, der es den Post-Thumb- und Post-Content-Elementen ermöglicht, sich je nach Bedarf zu vergrößern und zu verkleinern. Der float: left auf dem Post-Thumb und der margin-left: auto auf dem Post-Content helfen dabei, die Elemente wie gewünscht zu positionieren.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Text in CSS um schwebende Bilder gewickelt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!