Tutorial susun atur pelbagai CSS untuk pemula

Pengenalan kepada CSS Tutorial Layout Multi-Column: Titik Utama

Modul susun atur multi-lajur CSS membolehkan pemaju membuat susun atur multi-lajur responsif, yang dapat menghasilkan hasil yang baik pada pelbagai saiz skrin. Atribut
• menentukan bilangan lajur, dan atribut column-count menentukan lebar setiap lajur. Kedua -duanya boleh ditetapkan ke column-width atau nombor positif, dan boleh ditetapkan pada masa yang sama menggunakan atribut singkatan auto. columns Atribut
• menentukan jarak lajur, dan atribut column-gap adalah bentuk disingkat, membolehkan kami menambah pembahagi antara lajur. Atribut column-rule menentukan bagaimana kandungan diperuntukkan untuk mengisi lajur, dan atribut column-fill mengawal bagaimana elemen merangkumi pelbagai lajur. column-span
Agar susun atur untuk memaparkan dengan baik pada semua saiz skrin, kedua -dua
• dan column-count harus ditentukan. Menggunakan pertanyaan media boleh membantu menyelesaikan masalah seperti menatal mendatar atau panjang lajur yang berlebihan. Pelayar warisan yang tidak menyokong fungsi multi-lajur akan diturunkan dengan elegan kepada susun atur tunggal. column-width

baris teks panjang mungkin lebih susah payah untuk dibaca, dan pembaca memberi perhatian lebih kepada garis-garis yang tidak hilang dan bukannya kandungan teks itu sendiri. Masalah ini dapat diselesaikan dengan mudah menggunakan susun atur berbilang lajur. Susun atur pelbagai lajur sangat biasa dalam media cetak. Fungsi modul susun atur multi-lajur CSS membolehkan kita menghasilkan semula kesan multi-lajur yang sama di laman web.

Salah satu kesukaran dalam menggunakan susun atur berbilang lajur dalam reka bentuk web adalah ketidakupayaan untuk mengawal saiz dokumen. Dalam tutorial ini, saya akan mengajar anda bagaimana untuk membuat susun atur pelbagai lajur yang responsif yang akan berfungsi dengan baik pada pelbagai saiz skrin. Kami akan bermula dengan asas -asas dan kemudian secara beransur -ansur mempelajari konsep yang lebih kompleks.

Sokongan penyemak imbas

Jika anda sanggup menggunakan awalan, sokongan penyemak imbas untuk susun atur multi-kolumn sangat baik. Menurut statistik dari laman web COL CAN IGE, ciri ini disokong dalam 95.32% pelayar di seluruh dunia. Sesetengah pelayar (seperti IE10, Edge, dan Opera Mini) menyokong sepenuhnya susun atur pelbagai kolumn. Pelayar lain seperti Firefox dan Chrome memerlukan awalan.

Jika anda perlu menyokong penyemak imbas yang lebih tua (biasanya IE9 dan ke bawah), anda boleh menggunakan polyfill lama. Sudah tentu, jika penyemak imbas tidak menyokong fungsi multi-lajur, susun atur akan diturunkan dengan elegan ke susun atur satu lajur. Oleh itu, polyfill mungkin bukan pilihan terbaik dalam kes ini.

Modul susun atur multi-kolumn CSS mempunyai banyak sifat yang berbeza. Dalam bahagian berikut, saya akan memperkenalkan mereka satu persatu.

Bilangan lajur dan lebar lajur Atribut

menentukan bilangan lajur yang akan ditetapkan untuk elemen. Anda boleh menetapkannya kepada column-count atau nombor positif. Apabila ditetapkan ke auto, bilangan lajur akan ditentukan oleh atribut auto. Jika ditetapkan ke nombor positif, semua lajur mempunyai lebar yang sama. column-widthAtribut

column-width menentukan lebar setiap lajur elemen. Ini tidak diikuti dengan ketat. Sebagai contoh, jika terdapat ruang yang tidak mencukupi, lajur boleh menjadi lebih sempit. Harta ini juga boleh ditetapkan kepada nilai auto atau nombor positif. Jika ditetapkan ke auto, lebar akan ditentukan oleh atribut column-count. Ruang bebas sama rata di semua lajur.

Sebagai alternatif, anda boleh menetapkan kedua -dua nilai pada masa yang sama menggunakan atribut singkatan columns. Sintaks atribut columns adalah seperti berikut:

.example {
  columns:  || 
}

Beberapa contoh penggunaan harta ini ditunjukkan di bawah, bersama -sama dengan penjelasan di sebelah setiap contoh:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

seperti yang anda lihat, definisi columns pertama adalah singkatan keempat, dan yang kedua adalah singkatan yang ketiga. Pada asasnya, jika integer tidak memperuntukkan mana -mana unit, ia dihuraikan kepada column-count.

Ini adalah demonstrasi codepen untuk menunjukkan ciri -ciri yang dibincangkan setakat ini

Jika anda mengubah saiz tetingkap, anda akan melihat perkara berikut:

Hartanah
• column-count selalu membuat bilangan lajur sama dengan nilai yang anda tentukan. Satu -satunya perkara yang berubah ialah lebar lajur.
Atribut
• column-width secara automatik mengubah bilangan lajur berdasarkan ruang yang ada. Bilangan lajur diselaraskan dengan membuat lebar lajur lebih besar daripada nilai yang ditentukan. Ia juga boleh menyesuaikan lebar semua lajur ke nilai yang lebih kecil jika terdapat ruang kosong yang tidak mencukupi.
Atribut
• menggunakan nilai columns sebagai had untuk bilangan lajur maksimum yang dibenarkan. Ia menyesuaikan lebar sedemikian rupa sehingga column-count tidak akan melebihi had kiraan, dan column-count juga sangat dekat dengan lebar yang ditentukan. column-width

jarak lajur dan peraturan lajur Atribut

membolehkan kita menentukan jumlah ruang antara lajur. Anda boleh menetapkannya ke column-gap atau nilai panjang. Ia boleh menjadi sifar, tetapi tidak negatif. Apabila anda menetapkannya ke normal, ia menggunakan jarak lalai antara lajur yang ditakrifkan oleh penyemak imbas. normal Atribut

adalah singkatan yang membolehkan kita menambah pembahagi antara lajur. Ini sama dengan menggunakan atribut column-rule atau border-left. Harta ini mengikuti sintaks berikut: border-right

.example {
  column-rule:  ||  || 
}

untuk

, anda boleh menentukan lebar sebagai panjang (contohnya column-rule-width) atau gunakan kata kunci (contohnya 3px, thin, atau medium). thick menerima nilai seperti column-rule-style, dashed, dotted. Anda boleh menggunakan semua nilai yang sah dari atribut solid dengan border-style, yang boleh menjadi nilai warna yang sah. column-rule-style column-rule-color Ini adalah demonstrasi codepen di mana sifat -sifat ini digunakan bersama

Ruang lajur dan lajur span

Atribut

menentukan cara menetapkan kandungan untuk mengisi lajur. Harta ini boleh ditetapkan ke

atau column-fill. Apabila ditetapkan ke auto, lajur dihuni dengan teratur. Gunakan balance untuk memastikan kandungannya sama rata di antara semua lajur. auto

Adalah penting untuk diperhatikan bahawa jika anda menetapkan ketinggian tetap untuk elemen lajur, Firefox akan mengimbangi kandungan secara automatik. Walau bagaimanapun, penyemak imbas lain akan mula memisahkan lajur dalam rangka.

column-span atribut mengawal bagaimana elemen merangkumi pelbagai lajur. Ia mempunyai dua nilai yang mungkin: all atau none. Apabila ditetapkan ke all, elemen merangkumi semua lajur. Harta ini tidak disokong di Firefox.

Ini adalah demonstrasi codepen bahawa "merangkumi" elemen blockquote di semua lajur

Di Firefox, blockquote berakhir di lajur tengah, yang mungkin menjadi sandaran yang boleh diterima.

Buat susun atur responsif dengan pelbagai lajur

Sekarang anda telah mempelajari tentang sifat-sifat yang berbeza dan nilai yang mungkin, mari fokus pada bagaimana untuk menjaga susun atur responsif dan mesra pengguna.

column-count dan column-width mempunyai masalah sendiri. Walaupun column-count dapat mengawal bilangan lajur pada peranti yang lebih besar, susun atur pada peranti yang lebih kecil akan terganggu. Begitu juga, column-width akan memastikan bahawa lajur tidak terlalu sempit pada peranti yang lebih kecil, tetapi akan menghasilkan banyak lajur pada peranti yang lebih besar.

Untuk memastikan susun atur anda dipaparkan dengan baik pada semua saiz skrin, anda harus menentukan kedua -dua column-count dan column-width. Dengan cara ini, anda boleh mengawal lebar dan bilangan lajur. Walau bagaimanapun, anda masih perlu menyelesaikan beberapa isu, yang akan dibincangkan seterusnya.

Betulkan menatal mendatar

Jika anda menentukan ketinggian tetap untuk lajur, mengecilkan Viewport akan menyebabkan bar tatal mendatar muncul. Oleh kerana kandungan tidak dapat diperluas secara menegak, ia akan berkembang secara mendatar. Untuk menyelesaikan masalah ini, anda boleh mengubah saiz penyemak imbas anda untuk melihat sejauh mana scrollbar mendatar muncul untuk kali pertama. Anda kemudian boleh menggunakan pertanyaan media untuk menetapkan ketinggian lajur di bawah lebar itu ke auto. Inilah kod untuk melakukan ini:

.example {
  columns:  || 
}

demonstrasi codepen ini menunjukkan masalah dan penyelesaian yang mungkin

Saiz semula tetingkap untuk melihat bagaimana kedua -dua contoh bertindak balas.

tetap lajur terlalu panjang

Jika lajur anda terlalu panjang, pengguna perlu terus menatal ke atas dan ke bawah untuk membaca segala -galanya, yang boleh menjengkelkan. Apabila ketinggian lajur lebih besar daripada ketinggian viewport itu sendiri, sebaiknya mengeluarkan pelbagai lajur. Ini boleh dilakukan lagi menggunakan pertanyaan media:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Dalam kes ini, saya hanya menggunakan pelbagai lajur apabila lebar paparan membolehkan pengguna tidak lagi perlu menatal ke atas dan ke bawah.

Lihat demo dengan pelbagai lajur dan pertanyaan media

Kesimpulan

Saya harap tutorial pengenalan ini untuk modul susun atur multi-kolumn CSS akan membiasakan anda dengan ciri ini. Ciri -ciri ini boleh ditambah dengan baik ke kotak alat reka bentuk responsif anda, dan jika anda masih perlu menyokong penyemak imbas yang lebih lama, pelbagai lajur sering diturunkan dengan elegan ke lajur tunggal.

FAQ untuk susun atur multi-kolumn CSS

Bagaimana untuk membuat susun atur pelbagai kolumn dalam CSS?

Membuat susun atur pelbagai lajur dalam CSS sangat mudah. Anda boleh menggunakan harta column-count untuk menentukan bilangan lajur yang anda inginkan dalam susun atur. Sebagai contoh, jika anda mahukan tiga lajur, anda boleh menulis:

.example {
  columns:  || 
}

Dalam contoh ini, .container adalah kelas unsur -unsur yang anda mahu membahagikan ke dalam lajur. Atribut column-count secara automatik akan membahagikan kandungan elemen ke dalam bilangan lajur yang ditentukan.

Bagaimana untuk mengawal jarak antara lajur dalam CSS?

Hartanah

column-gap membolehkan anda mengawal ruang antara lajur. Nilai yang anda tetapkan untuk harta ini akan menjadi lebar jurang. Sebagai contoh, jika anda mahukan jurang 20px antara lajur, anda boleh menulis:

.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}

Bolehkah saya membuat lajur lebar yang berbeza dalam CSS?

Malangnya, modul susun atur multi-kolumn CSS tidak menyokong lajur lebar yang berbeza. Semua lajur yang dibuat dengan atribut column-count akan mempunyai lebar yang sama. Walau bagaimanapun, anda boleh menggunakan teknik CSS lain seperti Flexbox atau Grid untuk membuat lajur lebar yang berbeza.

Bagaimana untuk mengawal lebar lajur dalam CSS?

anda boleh menggunakan atribut column-width untuk mengawal lebar lajur. Harta ini menentukan lebar optimum lajur, tetapi penyemak imbas menyesuaikan lebar jika perlu sesuai dengan kandungan. Sebagai contoh, untuk menetapkan lebar lajur ke 200px, anda boleh menulis:

.example {
  column-rule:  ||  || 
}

Bagaimana untuk membuat peraturan lajur dalam CSS?

Hartanah

column-rule membolehkan anda membuat peraturan atau garis antara lajur. Anda boleh menentukan lebar, gaya, dan warna peraturan. Sebagai contoh, untuk membuat peraturan hitam pepejal 1px, anda boleh menulis:

.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}

Bagaimana untuk mengawal gangguan lajur dalam CSS?

Hartanah

break-inside membolehkan anda mengawal gangguan lajur. Anda boleh menetapkan harta ini kepada avoid untuk mengelakkan gangguan dalam elemen. Contohnya:

@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}

Bolehkah saya menggunakan susun atur pelbagai lajur dengan reka bentuk responsif?

Ya, anda boleh menggunakan susun atur pelbagai lajur dengan reka bentuk responsif. Anda boleh menggunakan pertanyaan media untuk menyesuaikan bilangan lajur berdasarkan lebar viewport. Sebagai contoh, anda mungkin mahu memaparkan satu lajur pada skrin kecil dan tiga lajur pada skrin besar.

Bagaimana untuk mengisi lajur dalam CSS?

Secara lalai, lajur dihuni dengan teratur. Ini bermakna pertama mengisi lajur pertama, kemudian lajur kedua, dan sebagainya. Walau bagaimanapun, anda boleh mengubah tingkah laku ini menggunakan atribut

. Jika anda menetapkan harta ini kepada column-fill, penyemak imbas akan cuba mengisi lajur secara merata. balance

Bagaimana untuk menyeberangi lajur?

Atribut

membolehkan unsur -unsur merangkumi pelbagai lajur. Anda boleh menetapkan harta ini kepada column-span untuk membuat elemen span semua lajur. Contohnya: all

Adakah terdapat masalah keserasian pelayar dengan susun atur multi-kolumn CSS?

.container {
  column-count: 3;
}

Pelayar yang paling moden menyokong susun atur multi-kolumn CSS, tetapi mungkin terdapat beberapa perbezaan dalam pelaksanaan. Adalah lebih baik untuk menguji susun atur anda dalam penyemak imbas yang berbeza untuk memastikan ia berfungsi seperti yang diharapkan. Anda juga boleh menggunakan alat seperti yang boleh saya gunakan untuk menyemak sokongan penyemak imbas untuk sifat CSS yang berbeza.

Atas ialah kandungan terperinci Tutorial susun atur pelbagai CSS untuk pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!