Bagaimana untuk Mengapungkan Imej ke Kiri Teks Tanpa Membungkus?

CSS Float: Terapung Imej ke Kiri Teks

Dalam senario ini, anda menyasarkan untuk mencapai reka letak dengan imej lakaran kecil terapung di sebelah kiri kandungan teks, tanpa teks membalut imej. Berikut ialah penjelasan yang dipertingkatkan tentang cara mencapai ini menggunakan HTML dan CSS:

Struktur HTML:

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

Penjelasan:

• The .post-container mengandungi kedua-dua lakaran kenit dan kandungan teks.
• .post-thumb mengapungkan imej ke kiri bekas.
• Paparan tetapan: sekat pada imej memastikan ia mengambil lebar penuh bekas .post-thumb.
• .post-content menggunakan jidar kiri 210px untuk memastikan terdapat ruang yang cukup antara imej dan teks.
• .tajuk pasca memformat tajuk siaran dengan saiz fon tebal dan lebih besar.

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