Menggunakan CSS float Property untuk Merancang Laman Web Layouts
Harta CSS adalah sifat yang sangat penting untuk susun atur. Ia membolehkan anda untuk meletakkan reka bentuk laman web anda tepat seperti yang anda mahu mereka paparkan-tetapi untuk menggunakannya anda harus memahami bagaimana ia berfungsi.
Dalam helaian gaya, sifat float CSS kelihatan seperti ini:
.right {float: right; }
Ini memberitahu penyemak imbas bahawa segala-galanya dengan kelas "betul" harus diapungkan ke kanan.
Anda akan memberikannya seperti ini:
kelas = "betul" />
Apa yang Boleh Anda Terapung dengan Ciri Terapung CSS?
Anda tidak boleh mengapungkan setiap elemen pada halaman web. Anda hanya boleh mengapungkan elemen peringkat blok . Ini adalah elemen yang mengambil blok ruang pada halaman, seperti gambar (), perenggan (), bahagian (), dan senarai ().
Elemen lain yang mempengaruhi teks, tetapi tidak membuat kotak di halaman dipanggil elemen inline dan tidak dapat diapungkan. Ini adalah unsur-unsur seperti span (), break line (), penekanan kuat (), atau huruf miring ().
Di mana Adakah Mereka Terapung?
Anda boleh mengapungkan unsur ke kanan atau kiri. Mana-mana elemen yang mengikuti elemen terapung akan mengalir di sekitar elemen terapung di sebelah yang lain.
Sebagai contoh, jika saya mengapungkan imej ke kiri, sebarang teks atau elemen lain yang mengikutinya akan mengalir di sekelilingnya ke kanan. Dan jika saya mengapungkan imej ke kanan, sebarang teks atau elemen lain yang mengikutinya akan mengalir di sekelilingnya ke kiri. Imej yang diletakkan di dalam blok teks tanpa gaya apungan yang digunakan padanya akan memaparkan namun penyemak imbas ditetapkan untuk memaparkan imej.
Ini biasanya dengan baris pertama teks berikut dipaparkan di bahagian bawah imej.
Seberapa jauh mereka akan terapung?
Unsur yang telah terapung akan bergerak jauh ke kiri atau ke kanan elemen kontainer yang boleh. Ini mengakibatkan beberapa situasi yang berbeza bergantung pada bagaimana kod anda ditulis.
Untuk contoh-contoh ini, saya akan mengapungkan elemen DIV kecil ke kiri:
- Sekiranya elemen terapung tidak mempunyai lebar yang telah ditetapkan, ia akan mengambil sebanyak ruang mendatar seperti yang diperlukan dan boleh didapati, tanpa mengira terapung. Nota: sesetengah pelayar cuba untuk meletakkan elemen di samping elemen terapung apabila lebar tidak ditakrifkan-biasanya memberikan unsur tidak terapung hanya sedikit ruang. Oleh itu, anda harus sentiasa menentukan lebar pada unsur yang terapung.
- Jika elemen kontena adalah elemen HTML, DIV terapung akan duduk di margin sebelah kiri halaman.
- Jika elemen kontena itu sendiri terkandung oleh sesuatu yang lain, DIV terapung akan duduk di sebelah kiri bekas.
- Anda boleh menyusun unsur-unsur sarang, dan itu boleh mengakibatkan terapung berakhir di tempat yang mengejutkan. Sebagai contoh, float ini adalah DIV terapung kiri di dalam DIV terapung kanan.
- Unsur-unsur terapung akan duduk bersebelahan jika ada ruang di dalam bekas. Sebagai contoh, bekas ini mempunyai tiga elemen DIV yang luas 100px yang terapung dalam kontena lebar 400px.
Anda juga boleh menggunakan terapung untuk membuat susun atur galeri foto. Anda meletakkan setiap lakaran kecil (ia berfungsi paling baik apabila saiznya sama) dalam DIV dengan kapsyen dan mengapungkan unsur DIV dalam bekas.
Tidak kira seberapa luas tetingkap penyemak imbas, lakaran kecil akan bersatu seragam.
Mematikan Terapung
Sebaik sahaja anda tahu bagaimana untuk mendapatkan elemen untuk terapung, adalah penting untuk mengetahui bagaimana untuk mematikan terapung. Anda mematikan terapung dengan harta CSS yang jelas. Anda boleh membersihkan terapung kiri, terapung kanan atau kedua-duanya:
jelas: kiri;
jelas: betul;
jelas: kedua-duanya;
Mana-mana elemen yang anda tetapkan harta yang jelas bagi akan muncul di bawah elemen yang melayang arah itu. Sebagai contoh, dalam contoh ini dua ayat pertama teks tidak dibersihkan, tetapi yang ketiga.
Bermain dengan nilai jelas unsur-unsur yang berbeza dalam dokumen anda untuk mendapatkan kesan susun atur yang berbeza.
Salah satu susun atur terapung yang paling menarik ialah satu siri gambar di sebelah kanan atau kiri di sebelah perenggan teks. Walaupun teks itu tidak cukup lama untuk menatal melepasi imej, anda boleh menggunakan jelas pada semua imej untuk memastikan ia muncul di lajur dan bukan di sebelah imej sebelumnya.
HTML (ulangi perenggan ini):
Duis aute irure dolor sede do anime temporarily inclusive in reprehenderit in voluptate. Cupidatat bukan proident, sebagai laborious and dolore magna aliqua.
CSS (untuk mengapungkan imej ke kiri):
img.float {float: left;
jelas: kiri;
margin: 5px;
}
Dan ke kanan:
img.float {float: right;
jelas: betul;
margin: 5px;
}
Menggunakan Float untuk Layout
Sebaik sahaja anda memahami bagaimana harta apungan berfungsi, anda boleh mula menggunakannya untuk meletakkan halaman web anda. Ini adalah langkah-langkah yang saya ambil untuk membuat halaman web terapung:
- Reka bentuk susun atur (di atas kertas atau dalam alat grafik atau di kepala saya).
- Tentukan di mana bahagian halaman akan menjadi.
- Tentukan lebar pelbagai bekas dan unsur-unsur di dalamnya.
- Terapung semuanya. Bahkan elemen kontena terluar diapungkan ke kiri sehingga saya tahu di mana ia akan berkaitan dengan port pandangan penyemak imbas.
Selagi anda tahu lebar (peratusan adalah baik) bahagian susun atur anda, anda boleh menggunakan harta apungan untuk meletakkannya di mana ia berada di halaman. Dan perkara yang baik ialah, anda tidak perlu risau tentang model kotak yang berbeza untuk Internet Explorer atau Firefox.