Wie verschiebt man in CSS ein Bild links vom Text?

Ein Bild links vom Text mit CSS schweben lassen

Problem

Sie haben Schwierigkeiten, ein Bild schweben zu lassen links vom Text in einem HTML-Element, während der Text rechts bleibt und verhindert wird, dass das Bild umbrochen wird it.

Aktuelle Implementierung

Hier ist Ihr HTML-Code:

<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 description description etc etc etc</p></div>
</div>

Und Ihr CSS-Code:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

Lösung

Um das gewünschte Ergebnis zu erzielen, können Sie Folgendes tun Änderungen:

HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
    <div class="post-content">
        <h3 class="post-title">Post title</h3>
        <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </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

• Die overflow: auto-Eigenschaft im .post-Container ermöglicht das Text fließt um das Bild herum und verhindert so, dass es umbrochen wird.
• Die display: block-Eigenschaft des Bildes stellt sicher, dass es die gesamte Breite seines Containers einnimmt.
• Die margin-left-Eigenschaft aktiviert Der .post-Inhalt bietet genügend Platz, damit das Bild links schweben kann.

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