Bagaimanakah Kami Boleh Mencapai Teks Membungkus Imej Tidak Sekata Menggunakan Divs dan CSS?

Balut Teks Di Sekitar Imej Tidak Sekata

Dalam landskap reka bentuk web hari ini, semakin biasa untuk menemui imej bukan segi empat tepat, seperti peta negara atau grafik vektor yang rumit. Kesan visual imej ini boleh dipertingkatkan dengan membalut teks di sekelilingnya, tetapi ini menimbulkan cabaran yang unik: bagaimanakah teks boleh mengalir secara semula jadi sambil mengekalkan jarak yang konsisten dari sempadan tidak sekata imej?

Selam Terapung ke Tentukan Kawasan Pembalut

Penyelesaian kreatif untuk masalah ini telah dicadangkan oleh Tory Lawson dalam catatan blognya pada 2011, "Membungkus teks di sekeliling bentuk bukan segi empat tepat." Kaedah Lawson melibatkan mencipta satu siri div yang terapung di sebelah bentuk dan menyekat kawasan yang akan dibalut oleh teks.

Mengukur dan Membahagi Bentuk

Untuk tentukan kawasan bungkus, perisian penyuntingan imej seperti Fireworks digunakan untuk meletakkan grid di atas imej dan melukis garisan sempadan di sekeliling sempadan teks yang dikehendaki. Lebar garisan ini kemudiannya diukur dan dibahagikan kepada selang yang sama (cth., setiap 10 piksel).

Mencipta Div

Setelah ukuran ditentukan, HTML list digunakan untuk mencipta satu siri div. Setiap div mewakili selang menegak dalam kawasan bungkus dan terapung ke kanan, mewujudkan kesan "penyekat" yang menghalang teks daripada mengalir ke atas bentuk.

Penggayaan CSS

Langkah terakhir melibatkan penggunaan gaya CSS pada div dan teks. Div pembalut diberikan lebar dan ketinggian yang merangkumi keseluruhan imej, dan sifat imej latar belakang ditetapkan kepada imej bentuk. Div spacer diberikan ketinggian yang sepadan dengan ukuran selang dan diapungkan ke kanan untuk mencipta kesan menyekat. Akhir sekali, teks digayakan dengan paparan sebaris dan warna untuk menjadikannya kelihatan pada imej.

Kod Contoh

<div>

#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

Kesimpulan

Walaupun mungkin tiada penyelesaian CSS yang mudah untuk membungkus teks pada bentuk yang tidak sekata, Kaedah Lawson menyediakan pendekatan yang berdaya maju. Dengan mengukur bentuk dengan teliti dan mencipta div untuk menyekat kawasan balut, adalah mungkin untuk mencapai hasil yang menarik secara visual apabila teks mengalir secara semula jadi dan mengekalkan jarak yang konsisten dari sempadan bentuk.

Atas ialah kandungan terperinci Bagaimanakah Kami Boleh Mencapai Teks Membungkus Imej Tidak Sekata Menggunakan Divs dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!