为什么浮动能实现文字环绕图片而不会重叠
今天看图解CSS的章节，虽然主要讲的是nth-of-type选择器的使用，但是本人却关注到了页面的排版方式，如下：
HTML
<body>
<p class="article">
<img src="http://img.ujian.cc/nice/35.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/36.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<img src="http://img.ujian.cc/nice/38.jpg" alt="" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</p>
</body>CSS
<style type="text/css">.article {width: 500px;margin: 20px auto;}.article img:nth-of-type(odd){float: left;margin-right: 10px;}.article img:nth-of-type(even){float: right;margin-left: 10px;}</style>
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
HTML, CSS dan jQuery: Buat butang dengan kesan terapung
Oct 24, 2023 pm 12:09 PM
HTML, CSS dan jQuery: Membuat butang dengan kesan terapung memerlukan contoh kod khusus Pengenalan: Pada masa kini, reka bentuk web telah menjadi satu bentuk seni Dengan menggunakan teknologi seperti HTML, CSS dan JavaScript, kita boleh menambah pelbagai jenis ciri pada halaman Kesan khas dan kesan interaktif sedemikian. Artikel ini akan memperkenalkan secara ringkas cara menggunakan HTML, CSS dan jQuery untuk mencipta butang dengan kesan terapung, dan memberikan contoh kod khusus. 1. Struktur HTML Pertama, kita perlu
Adakah terdapat sebarang cara untuk membersihkan terapung?
Feb 22, 2024 pm 04:00 PM
Adakah terdapat sebarang kaedah untuk mengosongkan apungan? Contoh kod khusus diperlukan Dalam reka letak halaman web, apungan ialah kaedah susun atur biasa yang membolehkan elemen memisahkan diri daripada aliran dokumen dan diposisikan secara relatif kepada elemen lain. Walau bagaimanapun, masalah yang sering dihadapi apabila menggunakan reka letak terapung ialah elemen induk tidak dapat membalut elemen terapung dengan betul, menyebabkan halaman mempunyai reka letak yang tidak teratur. Oleh itu, kita perlu mengambil langkah untuk membersihkan terapung supaya elemen induk dapat membalut elemen terapung dengan betul. Terdapat banyak cara untuk mengosongkan terapung Berikut akan memperkenalkan beberapa kaedah yang biasa digunakan dan memberikan contoh kod tertentu.
Petua reka letak HTML: Cara menggunakan atribut kedudukan untuk kawalan elemen terapung
Oct 21, 2023 am 09:22 AM
Kemahiran susun atur HTML: Cara menggunakan atribut kedudukan untuk mengawal elemen terapung Dalam reka bentuk web, reka letak adalah bahagian yang sangat penting. Melalui reka letak yang munasabah, halaman web boleh dijadikan lebih cantik dan mudah dibaca, dan pengalaman pengguna boleh dipertingkatkan. Dalam proses melaksanakan susun atur, kawalan elemen terapung adalah salah satu perkara utama. HTML menyediakan atribut kedudukan, yang melaluinya kita boleh mengawal elemen terapung. Artikel ini akan memperkenalkan cara menggunakan atribut kedudukan untuk susun atur elemen terapung dan menyediakan beberapa kod khusus
Panduan untuk sifat imej CSS: garis besar dan paparan
Oct 25, 2023 am 08:57 AM
Panduan untuk sifat imej CSS: garis besar dan paparanCSS merupakan bahagian penting dalam pembangunan bahagian hadapan, dan sifat imej juga penting. Dalam artikel ini, kami akan menumpukan pada dua konsep penting tentang sifat imej: garis besar dan paparan. Artikel ini akan memperincikan definisi, penggunaan dan contoh kod khusus mereka. Gambaran keseluruhan atribut garis besar: Atribut garis besar digunakan untuk membuat garis besar di sekeliling elemen tanpa menduduki ruang reka letak. ia adalah
CSS Floats dan Clear Floats: Menguasai Terapung dan Clear Floats
Nov 18, 2023 am 10:56 AM
CSS terapung dan membersihkan terapung: Menguasai kemahiran terapung dan membersihkan terapung memerlukan contoh kod khusus Dalam reka bentuk dan pembangunan web, CSS terapung (float) adalah salah satu teknik susun atur yang biasa. Anda boleh menggunakan apungan untuk mengalihkan elemen ke kiri atau kanan untuk melaraskan dan menyusun elemen pada halaman. Walau bagaimanapun, unsur terapung juga boleh menyebabkan beberapa masalah pada halaman, seperti ketinggian unsur induk runtuh, dsb. Oleh itu, adalah sangat penting untuk menguasai teknik menggunakan terapung dan membersihkannya. Artikel ini akan menumpukan pada apungan CSS dan teknik apungan yang jelas, dan memberikan khusus
Senarai lengkap sifat susun atur CSS: paparan, kedudukan dan apungan
Oct 20, 2023 pm 05:36 PM
Senarai lengkap sifat reka letak CSS: paparan, kedudukan dan apungan CSS ialah bahasa penanda yang digunakan untuk mengawal gaya halaman web. Sifat susun atur adalah sangat penting semasa mereka bentuk reka letak halaman web. CSS menyediakan pelbagai sifat susun atur, yang paling biasa digunakan ialah paparan, kedudukan dan apungan. Dalam artikel ini, kami akan memperkenalkan tiga sifat susun atur ini secara terperinci dan memberikan contoh kod khusus. atribut paparan Atribut paparan digunakan untuk menentukan elemen
Bincangkan sebab kedudukan tetap tidak boleh digunakan dalam HTML
Jan 20, 2024 am 10:15 AM
Perbincangan Mengenai Masalah Tidak Dapat Menggunakan Kedudukan Tetap dalam HTML Dengan perkembangan pesat Internet, reka bentuk web telah menjadi lebih kompleks dan pelbagai. Dalam reka bentuk web, selalunya perlu menggunakan kedudukan tetap (kedudukan:tetap) untuk mengawal kedudukan elemen supaya halaman boleh mencapai beberapa kesan khas. Walau bagaimanapun, dalam beberapa kes, kedudukan tetap tidak boleh digunakan dalam HTML, menyebabkan pereka banyak sakit kepala. Artikel ini akan meneroka ketidakupayaan untuk menggunakan kedudukan tetap dalam HTML dan memberikan contoh kod khusus. 1. Unsur terapung
Petua pengoptimuman sifat menu lungsur CSS: kedudukan dan indeks-z
Oct 20, 2023 pm 12:02 PM
Petua pengoptimuman atribut menu lungsur CSS: kedudukan dan indeks z Dalam reka bentuk web, menu lungsur turun ialah salah satu elemen interaktif yang biasa. Melalui menu lungsur, pengguna boleh memilih pilihan yang diperlukan dengan mudah, meningkatkan pengalaman pengguna. Walau bagaimanapun, apabila terdapat berbilang menu lungsur turun pada halaman, kedudukan dan perhubungan latanya boleh menyebabkan masalah. Untuk menyelesaikan masalah ini, kami boleh mengoptimumkan kesan paparan menu lungsur dengan menggunakan atribut kedudukan dan atribut z-index dalam CSS.
