Bagaimanakah Saya Boleh Membuat Balutan Teks di Sekitar Imej dalam HTML/CSS?

Balut Teks Sekitar Imej dalam HTML/CSS

Soalan:

Bolehkah kita membuat blok teks yang melilit gambar seperti gambar disediakan?

Jawapan:

Sudah tentu! Untuk mencapai kesan ini, adalah perlu untuk mengapungkan bekas imej. Begini cara untuk melakukannya:

Kod HTML:

<div>

Kod CSS:

#container {
    width: 400px;
    background: yellow;
}

#floated {
    float: left;
    width: 150px;
    background: red;
}

Keputusan:

Lebar tetap kontena (400px ) dan latar belakang kuning mencipta blok teks. Imej terapung (#terapung) dengan lebar 150px dan latar belakang merah diletakkan di sebelah kiri, membenarkan teks mengalir di sekelilingnya.

Contoh Interaktif:

Demonstrasi langsung teknik ini boleh didapati di JSFiddle: http://jsfiddle.net/kYDgL/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Balutan Teks di Sekitar Imej dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!