Bagaimana untuk Mengapungkan Imej ke Kiri Teks Tanpa Pembalut Teks?

CSS Float: Terapung Imej ke Kiri Teks

Soalan:

Bagaimana cara saya mengapungkan imej di sebelah kiri teks, memastikan teks tidak melilit imej?

Kod HTML:

<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>

Kod CSS:

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

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

.post-content {
    float:right;
}

Penyelesaian:

Untuk membetulkan peletakan dan memastikan teks tidak melilit imej:

1. Kemas kini Harta Limpahan:

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

Ini akan membenarkan teks mengalir bersama imej tanpa membalut.

2. Laraskan Margin-Kiri:

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

Ini akan mewujudkan ruang antara imej dan teks, memastikan teks tidak bertindih.

3. Paparkan Imej sebagai Blok:

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

Ini akan menjadikan imej berkelakuan seperti elemen blok, memastikan ia kekal dalam satu baris.

**4. Bolden dan Besarkan Catatan

Atas ialah kandungan terperinci Bagaimana untuk Mengapungkan Imej ke Kiri Teks Tanpa Pembalut Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!