Quy tắc cột - Thủ thuật CSS

Mục lục

Để làm cho các cột khác biệt, bạn có thể thêm một đường thẳng đứng giữa mỗi cột. Dòng nằm ở giữa khoảng cách cột. Nếu bạn đã từng tạo kiểu border, thì bạn đã sẵn sàng để tạo kiểu 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; )

Thuộc tính là viết tắt của column-rule-width, column-rule-stylevà column-rule-color, là cùng một mẫu bordervà chấp nhận các giá trị giống nhau.

-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-widthcó thể là độ dài như 3pxhoặc giá trị từ khóa như thin.

column-rule-stylecó thể là bất kỳ một border-stylegiá trị như solid, dotted, và dashed.

column-rule-color có thể là bất kỳ giá trị màu nào.

Không giống như column-gap, column-rulekhông chiếm dung lượng. Nếu column-rule-widthdày hơn column-gapthì quy tắc sẽ mở rộng bên dưới các cột.

Quy tắc dọc sẽ chỉ tồn tại giữa các cột có nội dung.