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>
<h3 id="Kod-CSS">Kod CSS:</h3>
<pre class="brush:php;toolbar:false">#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/