Isi lajur - Trik CSS

Isi kandungan

Apabila anda menambah ketinggian pada elemen berbilang lajur, anda dapat mengawal bagaimana kandungan mengisi lajur. Kandungannya dapat seimbang atau diisi secara berurutan.

ul ( height: 300px; -webkit-columns: 3; -moz-columns: 3; columns: 3; -moz-column-fill: balance; column-fill: balance; )

Harta tanah ini hanya terdapat di Firefox. Firefox secara automatik akan menyeimbangkan kandungan dalam susun atur berbilang lajur yang dibatasi tinggi. Penyemak imbas yang lain akan sentiasa mengisi lajur secara berurutan apabila diberi kekangan ketinggian.

Untuk menjadikan Firefox berkelakuan seperti penyemak imbas lain, iaitu mengisi lajur secara berurutan, anda boleh menetapkan column-fill: auto.

Nilai

column-fillmenerima nilai kata kunci balancedan auto.

balanceakan mengisi setiap lajur dengan jumlah kandungan yang hampir sama, tetapi tidak akan membiarkan lajur tumbuh lebih tinggi daripada height. Anda mungkin mendapati bahawa lajur akan muncul lebih pendek daripada heightpenyemak imbas mengedarkan kandungan secara mendatar.

autoakan mengisi setiap lajur sehingga mencapai heightdan lakukan ini sehingga kehabisan kandungan. Memandangkan kandungannya, nilai ini tidak semestinya akan mengisi semua lajur atau mengisinya sama rata.

Ia seperti menuangkan jus ke dalam gelas. Anda boleh menuangkan jus yang sama ke dalam setiap gelas dan mendapati bahawa anda tidak mengisi setiap gelas ke bahagian atas ( balance). Sebagai alternatif, anda boleh mengisi gelas ke bahagian atas sehingga penuh dan mengulanginya sehingga tidak ada jus yang tersisa. Akibatnya, gelas yang tinggal mungkin kurang atau tidak ada jus ( auto).

Lihat contoh isi lajur Pen (CSS-Tricks) oleh CSS-Tricks (@ css-tricks) di CodePen.

Sokongan Penyemak Imbas

Yang column-fillnilai kata kunci yang khusus bekerja di Firefox. Mereka tidak berfungsi pada bulan Ogos 2014 ketika entri Almanak ini pada asalnya ditulis, tetapi dilakukan ketika diuji lagi pada bulan Ogos 2015 (Chrome 44). Semasa ujian itu, nampaknya perubahan nilai secara dinamis tidak akan berlaku, anda harus memaksa relayout.

Sokongan penyemak imbas untuk susun atur berbilang lajur secara umum: