Layout Pelbagai Ruang (Majalah Sama) Dengan CSS3
Secara umum, orang akan kehilangan jejak apabila membaca kandungan yang sangat panjang. Oleh itu, dalam media cetak seperti majalah dan akhbar, kandungan dibahagikan kepada beberapa lajur untuk memudahkan bacaan.
Mewujudkan lajur di Web adalah cerita yang sama sekali berbeza. Ia agak sukar. Malah, tidak lama dahulu anda mungkin perlu membahagikan kandungan secara manual kepada beberapa divs dan terapung ke kanan atau kiri, kemudian nyatakan lebar, padding, margin, sempadan dan sebagainya.
Tetapi, perkara-perkara yang kini dipermudahkan dengan Modul Multi Column CSS3. Seperti yang dinyatakan dengan jelas, modul ini membolehkan kami untuk membahagikan kandungan ke dalam susun atur yang diletakkan di dalam akhbar atau majalah.
Sokongan Penyemak Imbas
Pelbagai ruangan kini disokong di semua pelayar - Firefox 2+, Chrome 4+, Safari 3.1+ dan Opera 11.1 - kecuali, seperti yang diramalkan, Internet Explorer, tetapi versi seterusnya, IE10, nampaknya telah mula memberikan sokongan untuk Modul ini.
Untuk seluruh pelayar, agar ia berfungsi, Firefox masih memerlukannya -moz- awalan, manakala Chrome dan Safari memerlukannya -webkit- awalan. Opera tidak memerlukan sebarang awalan, jadi kami hanya boleh menggunakan sifat rasmi.
Sumber: Bilakah saya boleh menggunakan susun atur lajur CSS3 Pelbagai?
Buat Lajur Pelbagai
Sebelum kita membuat lajur, kami telah menyediakan beberapa perenggan teks untuk demonstrasi, yang dibalut di dalam HTML5 tag, sebagai berikut;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Selamat datang ke sini, mencari tempat di mana sahaja, di mana sahaja. Donec dan tempur. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, duduk amet tincidunt orci placerat dalam. Integer vitae consequat augue. //dan sebagainya
... dan tentukan lebar untuk 600px dari helaian gaya, itu sahaja.
Sekarang, mari kita mula membuat lajur.
Dalam contoh di bawah, kami akan membahagikan kandungan tersebut dua lajur dengan kiraan jumlah lajur harta. Harta ini akan memberitahu penyemak imbas untuk menjadikan kandungan itu menjadi lajur mengikut nombor yang ditentukan dan biarkan pelayar menentukan lebar yang sesuai untuk setiap lajur.
artikel -webkit-column-count: 2; -moz-column-count: 2; kiraan lajur: 2;
Selain daripada didefinisikan oleh kiraan, lajur boleh dibuat dengan menyatakan lebar menggunakan lebar lajur harta dan meninggalkan pelayar untuk menentukan berapa banyak lajur yang perlu dijana di tempatnya.
Dalam contoh ini, kami menentukan lebar lajur untuk 150px, yang mengakibatkan kandungan dibahagikan kepada tiga lajur.
artikel -moz-column-width: 150px; -webkit-column-width: 150px; lajur-lebar: 150px;
Seperti yang dinyatakan di dalam spec. lebar sebenar lajur mungkin lebih luas atau sempit daripada lebar lajur yang ditentukan bergantung pada ruang yang ada. Juga, jika nilai lebar tidak dinyatakan dengan jelas, “auto” akan diambil sebagai lalai, yang juga boleh bermakna “tiada lajur”.
Gap Tiang
Gap Tiang tentukan ruang yang memisahkan setiap lajur. Nilai jurang boleh dinyatakan dalam em atau px, tetapi seperti yang dinyatakan di dalam spec nilai itu tidak boleh menjadi negatif. Dalam contoh di bawah, kami menyatakan jurang untuk 30px, jadi ruang antara lajur kelihatan sedikit lebih luas.
artikel -webkit-column-gap: 30px; -moz-column-gap: 30px; ruang-jurang: 30px;
Peraturan Lajur
Sekiranya anda ingin menambah sempadan di antara lajur, anda boleh menggunakannya peraturan lajur harta, yang berfungsi sangat mirip dengan sempadan harta. Oleh itu, katakan, jika kita mahu meletakkan sempadan di antara kolum, kita boleh menulis;
artikel -moz-column-rule: 1px bertitik #ccc; -webkit-column-rule: 1px bertitik #ccc; lajur-peraturan: 1px bertitik #ccc;
Ruang Span
Harta ini berfungsi agak serupa dengan colspan dalam jadual tag. Pelaksanaan umum harta ini adalah untuk merangkumi tajuk utama kandungan di semua lajur. Inilah contohnya.
artikel h1 -webkit-column-span: all; span-span: semua;
Dalam contoh di atas, kami menentukan h1 untuk merangkumi semua lajur, dan jika rentang lajur ditentukan, 1 akan diambil sebagai lalai. Malangnya harta ini, pada masa penulisan ini, hanya berfungsi di Opera dan Chrome.
Perkataan Akhir
Itu sahaja untuk masa sekarang, kami telah melawati semua perkara penting untuk membuat beberapa lajur dengan CSS3, dan seperti yang telah disebutkan pada permulaan, modul ini berfungsi dengan baik dalam penyemak imbas moden tetapi ia tidak berfungsi lagi di Internet Explorer.
Pada akhirnya, kami harap anda kini mempunyai pemahaman yang cukup baik tentang cara membuat lajur dengan CSS3, dan jika anda mempunyai masa untuk eksperimen, berasa bebas untuk berkongsi kaedah dan hasil dalam kotak komen di bawah. Terima kasih kerana membaca tulisan ini dan bersenang-senang.
- Demo
- Muat turun Sumber
