Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Membungkus Teks Di Sekitar Imej Menggunakan HTML dan CSS?

Bagaimanakah Saya Boleh Membungkus Teks Di Sekitar Imej Menggunakan HTML dan CSS?

Linda Hamilton
Lepaskan: 2024-12-08 09:55:12
asal
964 orang telah melayarinya

How Can I Wrap Text Around Images Using HTML and CSS?

Mencapai Text Wrap Sekitar Imej dalam HTML/CSS

Cabaran membungkus teks di sekeliling imej adalah perkara biasa dalam reka bentuk web. Untuk mencipta kesan yang diingini, ikuti langkah yang digariskan di bawah:

Struktur HTML:

  1. Balut imej dan mana-mana teks di sekeliling dalam div bekas dengan id atribut, seperti #bekas.

CSS Penggayaan:

  1. Tentukan lebar khusus untuk div bekas untuk menentukan lebar teks yang dibalut.
  2. Tetapkan apungan: kiri ke div terapung yang mengandungi imej. Ini menyebabkan imej terapung ke kiri, membenarkan teks mengalir di sekelilingnya.
  3. Tetapkan lebar khusus untuk #floated div untuk mengawal lebar imej.
  4. Pastikan ruang yang mencukupi di sekeliling imej dengan pelapik atau tetapan jidar dalam div #terapung.

Contoh Kod:

<div>
Salin selepas log masuk
#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Salin selepas log masuk

Sumber Tambahan:

  • [JSFiddle Demo](http://jsfiddle.net/kYDgL/ )
  • [Dokumen Web MDN: Terapung](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
  • [W3 Schools: Text Wrapping](https://www.w3schools.com/css /css_text-wrap.asp)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membungkus Teks Di Sekitar Imej Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan