Bagaimana untuk Membungkus Teks Di Sekitar Imej Berbentuk Tidak Sekata Menggunakan Div Terapung?

Cara Membungkus Teks Di Sekitar Imej Berbentuk Tidak Sekata

Membungkus teks di sekeliling imej ialah teknik susun atur biasa, tetapi bagaimana jika imej anda tidak segi empat tepat? Bolehkah anda masih mencipta kesan pembalut yang elegan?

Dalam artikel ini, kami akan meneroka kaedah yang dicadangkan oleh Tory Lawson, yang membolehkan anda membalut teks di sekeliling imej berbentuk tidak sekata dengan menyekat kawasan bentuk dengan div terapung.

Langkah 1: Tentukan Kawasan Balutan

Terbalik imej anda terbalik dan lukis garis sempadan di mana anda mahu teks berakhir, dengan mengambil kira padding kecil untuk pelepasan. Gunakan sistem grid untuk memastikan jarak yang konsisten dari sempadan imej.

Langkah 2: Buat Senarai Pengukuran

Ukur lebar garisan setiap 10 piksel dan tulis ke bawah koordinat-x di atas kertas. Ini akan memandu jarak div penyekat anda.

Langkah 3: Buat Penanda dan CSS

Tentukan div pembalut untuk mengandungi imej dan div penyekat. Di dalam pembalut, buat div pengatur jarak dan tetapkan lebarnya mengikut ukuran yang anda kumpulkan dalam Langkah 2.

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}

.spacer {
  display: block;
  float: right;
  clear: right;
}

p {
  display: inline;
  color: #FFF;
}

Dengan mengikuti langkah-langkah ini, anda akan dapat membalut teks secara tidak teratur dengan berkesan imej berbentuk, memberikan reka bentuk anda rupa yang unik dan digilap. Walaupun mungkin tiada pilihan "balut teks" yang mudah dalam CSS, penyelesaian ini menyediakan penyelesaian yang boleh dipercayai dan menyenangkan dari segi estetika.