Bagaimana untuk Meletakkan Imej Kiri Teks Tanpa Membungkus Menggunakan CSS Floats?

Menggunakan CSS Terapung untuk Meletakkan Imej Kiri Teks

Apabila mereka bentuk halaman web, anda mungkin menghadapi situasi di mana anda mahu imej muncul di sebelah kiri teks, tanpa ia membungkus teks. Menggunakan CSS floats menyediakan penyelesaian untuk ini.

HTML

Dalam HTML yang anda sediakan, terdapat tiga elemen penting:

• .post-container: Mengandungi keseluruhan kotak pos.
• .post-thumb: Mengandungi imej yang anda mahu terapung kiri.
• .post-content: Memegang tajuk dan penerangan siaran.

<div class="post-container">
    <div class="post-thumb"><img  src="/static/imghwm/default1.png" data-src="thumb.jpg" class="lazy" alt="Bagaimana untuk Meletakkan Imej Kiri Teks Tanpa Membungkus Menggunakan CSS Floats?" ></div>
    <div class="post-title">Post title</div>
    <div class="post-content"><p>post description...</p></div>
</div>

CSS

Untuk mencapai reka letak yang diingini, gunakan sifat CSS berikut :

• .post-container: Tetapkan limpahan: auto untuk membenarkan kandungan bahagian dalam untuk melangkaui sempadan kontena.
• .post-thumb: Set float: kiri untuk mengapungkan imej ke kiri.
• .post-thumb img: Tetapkan paparan: blok untuk memastikan imej dipaparkan dengan sendirinya space.
• .post-content: Tetapkan nilai margin-kiri lebih besar daripada lebar imej (cth., 210px) untuk meletakkan teks di sebelah kanan imej.

.post-container {
    overflow: auto;
}

.post-thumb {
    float: left;
}

.post-thumb img {
    display: block;
}

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

Nota Penting

• Untuk mengelakkan imej daripada melilit teks, pastikan nilai margin-kiri untuk .post-content lebih lebar daripada lebar imej.
• Jika anda inginkan pengepala di bahagian atas kotak pos, pertimbangkan untuk menggunakan

  tag dalam .post-content.

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