Bagaimana untuk Mencegah Teks daripada Membungkus Imej Terapung dalam CSS?

Imej dan Teks Terapung dalam CSS

Anda inginkan reka letak di mana lakaran kecil terapung di sebelah kiri teks, sambil menghalang teks melilit imej . Begini cara anda boleh mencapai ini:

Struktur HTML:

<div class="post-container">                
    <div class="post-thumb"><img src="thumb.jpg" /></div>
    <div class="post-content">
        <div class="post-title">Post title</div>
        <p>Post description...</p>
   </div>
</div>

Penggayaan CSS:

.post-container {
    margin: 20px 20px 0 0;  
    border: 5px solid #333;
    display: flex; /* Create a flexible layout container */
}
.post-thumb {
    float: left;
    margin-right: 20px; /* Create some spacing between the thumbnail and text */
}
.post-thumb img {
    display: block;
}
.post-content {
    margin-left: auto; /* Push the text to the right side of the container */
}
.post-title {
    font-weight: bold;
    font-size: 200%;
}

Oleh menggunakan paparan CSS: flex, kami mencipta bekas fleksibel yang membolehkan elemen pasca ibu jari dan pasca kandungan mengembang dan mengecut mengikut keperluan. Terapung: kiri pada post-ibu jari dan jidar-kiri: auto pada pasca kandungan membantu meletakkan elemen seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Teks daripada Membungkus Imej Terapung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!