Bagaimana untuk Mengapungkan Imej ke Kiri Teks dalam CSS?

Mengapung Imej ke Kiri Teks dengan CSS

Masalah

Anda menghadapi kesukaran mengapungkan imej di sebelah kiri teks dalam elemen HTML, sambil mengekalkan teks di sebelah kanan dan menghalang imej daripada melilit ia.

Pelaksanaan Semasa

Ini kod HTML anda:

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

Dan kod CSS anda:

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

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

.post-content {
    float:right;
}

Penyelesaian

Untuk mencapai hasil yang diinginkan, anda boleh buat pengubahsuaian berikut:

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

Penjelasan

• Limpahan: sifat auto pada .post-container membenarkan teks mengalir di sekeliling imej, menghalangnya daripada membalut.
• Paparan: menyekat sifat pada imej memastikan ia mengambil lebar penuh bekasnya.
• Sifat jidar-kiri pada .post-content menyediakan ruang yang mencukupi untuk imej terapung di sebelah kiri.

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