Selama bertahun-tahun, terapung CSS telah menjadi komponen yang rapi, namun perlu, dalam membuat susun atur laman web. Jika reka bentuk anda dipanggil untuk pelbagai lajur, anda berpaling kepada terapung . Masalah dengan kaedah ini ialah, walaupun kebijaksanaan yang luar biasa yang dibuat oleh pereka / pemaju web dalam membuat susun atur tapak yang kompleks, terapung CSS tidak pernah benar-benar dimaksudkan untuk digunakan dengan cara ini.
Walaupun pelampung dan kedudukan CSS pasti mempunyai tempat dalam reka bentuk web untuk beberapa tahun akan datang, teknik susunatur yang lebih baru termasuk CSS Grid dan Flexbox kini memberikan pereka web cara baru untuk membuat susun atur laman web mereka. Satu lagi teknik susunatur baru yang menunjukkan banyak potensi adalah CSS Columns Multiple.
Lajur CSS telah wujud selama beberapa tahun sekarang, tetapi kekurangan sokongan dalam pelayar lama (terutamanya versi Internet Explorer yang lebih tua) telah memelihara banyak profesional web daripada menggunakan gaya ini dalam kerja pengeluaran mereka.
Dengan akhir sokongan untuk versi IE yang lebih tua, beberapa pereka web kini sedang bereksperimen dengan pilihan susunatur CSS baru, CSS Columns disertakan, dan mendapati bahawa mereka mempunyai lebih banyak kawalan dengan pendekatan baru ini daripada yang mereka lakukan dengan terapung.
Asas-Asas Lajur CSS
Seperti namanya, CSS Columns Multiple (juga dikenali sebagai susun atur multi-kolom CSS3) membolehkan anda memecah kandungan ke dalam beberapa set lajur. Ciri-ciri CSS yang paling asas yang akan anda gunakan ialah:
- kiraan kira-kira
- jurang ruang
Untuk menghitung lajur, anda menyatakan bilangan lajur yang anda mahu. Jurang lajur adalah selokan atau jarak antara lajur tersebut. Pelayar akan mengambil nilai-nilai ini dan memecah kandungan secara merata ke dalam bilangan lajur yang anda tentukan.
Satu contoh umum dari pelbagai lajur CSS dalam amalan ialah untuk membahagi blok kandungan teks ke dalam beberapa lajur, sama seperti yang anda lihat dalam artikel akhbar. Katakan anda mempunyai markup HTML berikut (ambil perhatian bahawa sebagai contoh tujuan, saya hanya meletakkan permulaan satu perenggan, sementara dalam praktiknya mungkin ada banyak perenggan kandungan dalam markup ini):
Tajuk artikel anda
Bayangkan banyak perenggan teks di sini ...
Jika anda kemudian menulis gaya CSS ini:
.content {-moz-column-count: 3; -webkit-column-count: 3; kiraan lajur: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; }Peraturan CSS ini akan memisahkan bahagian "kandungan" menjadi 3 lajur yang sama dengan jurang 30 piksel di antara mereka. Jika anda menginginkan dua lajur dan bukannya 3, anda hanya akan mengubah nilai itu dan pelayar akan mengira lebar baru bagi lajur tersebut untuk memecah kandungan secara sama rata. Perhatikan bahawa kami menggunakan ciri-prefixed vendor terlebih dahulu, diikuti dengan perisytiharan yang tidak bersambung.
Semudah ini, penggunaannya dengan cara ini boleh dipersoalkan untuk kegunaan laman web. Ya, anda boleh membahagi sekumpulan kandungan ke dalam beberapa lajur, tetapi ini mungkin bukan pengalaman membaca terbaik untuk Web, terutama jika ketinggian lajur ini jatuh di bawah "lipatan" skrin.
Pembaca kemudian perlu menatal ke atas dan ke bawah untuk membaca kandungan penuh. Namun, pengetua CSS Columns adalah semudah yang anda lihat di sini, dan ia boleh digunakan untuk melakukan lebih daripada sekadar membahagikan kandungan beberapa perenggan - ia boleh digunakan untuk susun atur.
Layout Dengan CSS Columns
Katakan bahawa anda mempunyai laman web dengan kawasan kandungan yang mempunyai 3 lajur kandungan. Ini adalah susun atur laman web yang sangat tipikal, dan untuk mencapai 3 lajur ini, biasanya anda akan mengaplikasikan bahagian-bahagian yang berada di dalam. Dengan CSS multiple-columns, ia adalah lebih mudah.
Berikut ialah beberapa contoh HTML:
Berita Terkini
Kandungan akan pergi di sini ... > Dari Blog Kami
Kandungan akan pergi ke sini ...
Acara Akan Datang p> CSS untuk membuat beberapa lajur ini bermula dengan apa yang anda lihat sebelumnya:
.content {-moz-column-count: 3; -webkit-column-count: 3; kiraan lajur: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; } Sekarang, cabaran di sini ialah, kerana penyemak imbas mahu memecah kandungan ini secara sama rata, jadi jika panjang kandungan bahagian ini berbeza, penyemak imbas itu sebenarnya akan memisahkan kandungan bahagian individu, menambahkan permulaannya kepada satu lajur dan kemudian teruskan ke yang lain (anda boleh melihatnya dengan menggunakan kod ini untuk menjalankan percubaan dan menambah panjang kandungan yang berbeza dalam setiap bahagian)!
Itu bukan apa yang anda mahukan. Anda mahu masing-masing bahagian untuk membuat lajur yang berbeza dan, tidak kira betapa besar atau kecil kandungan bahagian individu, anda tidak mahu ia berpecah. Anda boleh mencapai ini dengan menambahkan satu baris tambahan ini CSS:
.content div {display: inline-block; } Ini akan memaksa bahagian-bahagian yang berada di dalam "kandungan" kekal utuh walaupun pelayar memisahkannya ke beberapa lajur. Lebih baik lagi, kerana kami tidak memberi apa-apa di sini dengan lebar tetap, lajur ini secara automatik akan mengubah saiz sebagai penyemak imbas mengubah saiz, menjadikannya aplikasi yang ideal untuk laman web yang responsif . Dengan gaya "inline-block" di tempat ini, setiap 3 bahagian anda akan menjadi lajur kandungan yang berbeza.
Menggunakan Lebar Lajur
Terdapat satu lagi harta selain "column count" yang boleh anda gunakan, dan bergantung pada keperluan susun atur anda, ini sebenarnya mungkin menjadi pilihan yang lebih baik untuk tapak anda. Ini adalah "lajur-lebar". Menggunakan markup HTML yang sama seperti yang ditunjukkan sebelum ini, kami boleh melakukannya dengan CSS kami:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; lajur-lebar: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; } .content div {display: block-inline; } Cara kerja ini adalah bahawa penyemak imbas menggunakan "lajur-lebar" ini sebagai nilai maksimum lajur tersebut. Jadi jika tetingkap pelayar kurang daripada 500 piksel, 3 bahagian ini akan muncul dalam satu lajur, salah satu daripada bahagian yang lain. Ini adalah susun atur biasa yang digunakan untuk susun atur skrin mudah alih / kecil.
Oleh kerana lebar pelayar meningkat menjadi cukup besar untuk menyesuaikan 2 lajur bersama dengan jurang lajur yang ditentukan, penyemak imbas akan secara automatik pergi dari susun atur lajur tunggal ke dua lajur. Terus meningkatkan lebar skrin dan akhirnya, anda akan mendapat 3 reka bentuk lajur, dengan masing-masing 3 bahagian kami dipaparkan dalam lajur mereka sendiri. Sekali lagi, ini adalah cara yang baik untuk mendapatkan beberapa susun atur yang mesra , mesra peranti , dan anda tidak perlu menggunakan pertanyaan media untuk mengubah gaya susun atur!
Hartanah Column Lain
Di samping ciri-ciri yang diliputi di sini, terdapat juga sifat-sifat untuk "lajur-peraturan", termasuk warna, gaya, dan nilai lebar yang membolehkan anda membuat peraturan di antara lajur anda. Ini akan digunakan bukannya sempadan jika anda ingin mempunyai beberapa baris memisahkan tiang anda.
Masa untuk Eksperimen
Pada masa ini, CSS Column Layout Layout disokong dengan baik. Dengan awalan, lebih daripada 94% pengguna web akan dapat melihat gaya ini, dan kumpulan yang tidak disokong itu akan menjadi versi Internet Explorer yang lebih lama yang anda tidak akan menyokong lagi.
Dengan tahap sokongan sekarang ini, tidak ada sebab untuk tidak bereksperimen dengan CSS Columns dan menggunakan gaya ini dalam laman web siap sedia. Anda boleh memulakan eksperimen anda menggunakan HTML dan CSS yang disajikan dalam artikel ini dan bermain-main dengan nilai yang berbeza untuk melihat apa yang akan berfungsi dengan baik untuk keperluan tata letak tapak anda.
CSS untuk membuat beberapa lajur ini bermula dengan apa yang anda lihat sebelumnya:
.content {-moz-column-count: 3; -webkit-column-count: 3; kiraan lajur: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; }Sekarang, cabaran di sini ialah, kerana penyemak imbas mahu memecah kandungan ini secara sama rata, jadi jika panjang kandungan bahagian ini berbeza, penyemak imbas itu sebenarnya akan memisahkan kandungan bahagian individu, menambahkan permulaannya kepada satu lajur dan kemudian teruskan ke yang lain (anda boleh melihatnya dengan menggunakan kod ini untuk menjalankan percubaan dan menambah panjang kandungan yang berbeza dalam setiap bahagian)!
Itu bukan apa yang anda mahukan. Anda mahu masing-masing bahagian untuk membuat lajur yang berbeza dan, tidak kira betapa besar atau kecil kandungan bahagian individu, anda tidak mahu ia berpecah. Anda boleh mencapai ini dengan menambahkan satu baris tambahan ini CSS:
.content div {display: inline-block; }Ini akan memaksa bahagian-bahagian yang berada di dalam "kandungan" kekal utuh walaupun pelayar memisahkannya ke beberapa lajur. Lebih baik lagi, kerana kami tidak memberi apa-apa di sini dengan lebar tetap, lajur ini secara automatik akan mengubah saiz sebagai penyemak imbas mengubah saiz, menjadikannya aplikasi yang ideal untuk laman web yang responsif . Dengan gaya "inline-block" di tempat ini, setiap 3 bahagian anda akan menjadi lajur kandungan yang berbeza.
Menggunakan Lebar Lajur
Terdapat satu lagi harta selain "column count" yang boleh anda gunakan, dan bergantung pada keperluan susun atur anda, ini sebenarnya mungkin menjadi pilihan yang lebih baik untuk tapak anda. Ini adalah "lajur-lebar". Menggunakan markup HTML yang sama seperti yang ditunjukkan sebelum ini, kami boleh melakukannya dengan CSS kami:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; lajur-lebar: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; ruang-jurang: 30px; } .content div {display: block-inline; }Cara kerja ini adalah bahawa penyemak imbas menggunakan "lajur-lebar" ini sebagai nilai maksimum lajur tersebut. Jadi jika tetingkap pelayar kurang daripada 500 piksel, 3 bahagian ini akan muncul dalam satu lajur, salah satu daripada bahagian yang lain. Ini adalah susun atur biasa yang digunakan untuk susun atur skrin mudah alih / kecil.
Oleh kerana lebar pelayar meningkat menjadi cukup besar untuk menyesuaikan 2 lajur bersama dengan jurang lajur yang ditentukan, penyemak imbas akan secara automatik pergi dari susun atur lajur tunggal ke dua lajur. Terus meningkatkan lebar skrin dan akhirnya, anda akan mendapat 3 reka bentuk lajur, dengan masing-masing 3 bahagian kami dipaparkan dalam lajur mereka sendiri. Sekali lagi, ini adalah cara yang baik untuk mendapatkan beberapa susun atur yang mesra , mesra peranti , dan anda tidak perlu menggunakan pertanyaan media untuk mengubah gaya susun atur!
Hartanah Column Lain
Di samping ciri-ciri yang diliputi di sini, terdapat juga sifat-sifat untuk "lajur-peraturan", termasuk warna, gaya, dan nilai lebar yang membolehkan anda membuat peraturan di antara lajur anda. Ini akan digunakan bukannya sempadan jika anda ingin mempunyai beberapa baris memisahkan tiang anda.
Masa untuk Eksperimen
Pada masa ini, CSS Column Layout Layout disokong dengan baik. Dengan awalan, lebih daripada 94% pengguna web akan dapat melihat gaya ini, dan kumpulan yang tidak disokong itu akan menjadi versi Internet Explorer yang lebih lama yang anda tidak akan menyokong lagi.
Dengan tahap sokongan sekarang ini, tidak ada sebab untuk tidak bereksperimen dengan CSS Columns dan menggunakan gaya ini dalam laman web siap sedia. Anda boleh memulakan eksperimen anda menggunakan HTML dan CSS yang disajikan dalam artikel ini dan bermain-main dengan nilai yang berbeza untuk melihat apa yang akan berfungsi dengan baik untuk keperluan tata letak tapak anda.