Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membungkus Teks Di Sekitar Imej Tidak Teratur Menggunakan CSS dan Divs?
Bagaimana untuk Membungkus Teks Di Sekitar Imej Tidak Teratur Menggunakan CSS dan Divs?
- Linda Hamiltonasal
- 2024-12-20 10:03:111003semak imbas
Bagaimana untuk Membungkus Teks Di Sekitar Imej Bukan Segi Empat?
Menyesuaikan aliran teks untuk membalut sempadan yang tidak teratur boleh meningkatkan daya tarikan visual tapak web atau aplikasi anda. Artikel ini meneroka kaedah yang dicadangkan oleh Tory Lawson dalam catatan blognya pada 2011, "Membungkus teks di sekeliling bentuk bukan segi empat tepat."
Langkah 1: Tentukan Kawasan Balutan
Menggunakan program penyuntingan imej, tentukan sempadan teks yang diingini dengan melukis garisan sempadan yang mewakili tempat teks harus berakhir.
Langkah 2: Buat Senarai
Ukur lebar kawasan bungkus pada selang masa yang tetap (mis., setiap 10 piksel). Rekod nilai ini untuk berfungsi sebagai lebar div spacer.
Langkah 3: Laksanakan Markup dan CSS
Markup:
<body> <div>
CSS:
#wrapper {
width:634px;
height:428px;
display:block;
background-image:url("headshot.jpg");
}
.spacer{
display:block;
float:right;
clear:right;
}
p {
display:inline;
color:#FFF;
}
Teknik ini terapung div untuk menyekat kawasan bentuk, membenarkan teks membalut imej bukan segi empat tepat sambil mengekalkan jarak yang konsisten dari sempadannya.
Kesimpulan
Membungkus teks di sekeliling imej bukan segi empat tepat memerlukan pendekatan tersuai. Walaupun tiada penyelesaian CSS langsung, kaedah yang diterangkan dalam artikel ini boleh mencapai kesan yang diingini dengan berkesan.
Atas ialah kandungan terperinci Bagaimana untuk Membungkus Teks Di Sekitar Imej Tidak Teratur Menggunakan CSS dan Divs?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!