Peraturan lajur - Trik CSS

Isi kandungan

Untuk menjadikan lajur berbeza, anda boleh menambahkan garis menegak antara setiap lajur. Garis duduk di tengah jurang lajur. Sekiranya anda pernah bergaya border, maka anda sudah bersedia untuk menggayakan column-rule.

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

Harta itu singkatan untuk column-rule-width, column-rule-styledan column-rule-color, yang merupakan corak yang sama seperti borderdan menerima nilai yang sama.

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthboleh seperti panjang 3pxatau nilai kata kunci seperti thin.

column-rule-styleboleh menjadi mana-mana border-stylenilai seperti solid, dotted, dan dashed.

column-rule-color boleh menjadi nilai warna apa pun.

Tidak seperti column-gap, column-ruletidak mengambil ruang. Sekiranya column-rule-widthlebih tebal daripada column-gapitu, peraturan akan berkembang di bawah lajur.

Peraturan menegak hanya akan wujud di antara lajur yang mempunyai kandungan.