Bolehkah Teks Membungkus Imej Berbentuk Tidak Sekata?

Bolehkah Teks Dibalut Dengan Imej Bukan Segi Empat?

Membungkus teks di sekeliling imej bukan segi empat tepat ialah cabaran biasa dalam reka bentuk web. Pertimbangkan kes di mana anda mempunyai peta negara yang berbeza dan anda mahu teks itu membungkus bentuk negara, mengekalkan jarak yang konsisten dari sempadan. Adakah mungkin untuk mencapai ini?

Penyelesaian

Ya, adalah mungkin untuk membungkus teks di sekeliling imej bukan segi empat tepat menggunakan teknik yang digariskan oleh Tory Lawson pada tahun 2011 beliau catatan blog, "Membungkus teks di sekeliling bentuk bukan segi empat tepat." Kaedah ini melibatkan div terapung untuk menyekat kawasan bentuk:

Langkah 1: Tentukan Kawasan Balutan

• Tentukan jarak yang dikehendaki antara teks dan sempadan imej.
• Buka imej dalam program penyuntingan dan tindanan a grid.
• Lukis bentuk sempadan yang mewakili tempat teks harus berakhir, mempertimbangkan pelapik (cth., 5px).

Langkah 2: Buat Senarai Ukuran Lebar

• Ukur lebar kawasan balut pada selang masa yang tetap (mis., setiap 10 piksel).
• Rekodkan ukuran ini pada sehelai kertas.

Langkah 3: Buat Div

• Buat div untuk bertindak sebagai pembalut untuk imej dan teks.
• Buat div tambahan untuk setiap ukuran lebar.

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

Nota: Pendekatan ini tidak semudah menggunakan CSS "text- pilihan bungkus", tetapi ia membenarkan kawalan tepat ke atas gelagat bungkus teks.

Atas ialah kandungan terperinci Bolehkah Teks Membungkus Imej Berbentuk Tidak Sekata?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!