Wie verschiebt man ein Bild links vom Text ohne Textumbruch?

CSS Float: Ein Bild links vom Text schweben lassen

Frage:

Wie lasse ich ein Bild schweben? links vom Text, um sicherzustellen, dass der Text das Bild nicht umschließt?

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>

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 die Platzierung zu korrigieren und stellen Sie sicher, dass der Text das Bild nicht umfängt:

1. Aktualisieren Sie die Overflow-Eigenschaft:

.post-container {
    ...
    overflow: auto;
}

Dadurch kann der Text ohne Umbruch neben dem Bild fließen.

2. Passen Sie den linken Rand an:

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

Dadurch entsteht ein Abstand zwischen dem Bild und dem Text, sodass sich der Text nicht überlappt.

3. Zeigen Sie das Bild als Block an:

.post-thumb img {
    ...
    display: block;
}

Dadurch verhält sich das Bild wie ein Blockelement und stellt sicher, dass es in einer Zeile bleibt.

**4. Machen Sie den Beitrag fett und vergrößern Sie ihn

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