Lập trình web

Cách sử dụng CSS3 Columns

Chia sẻ nhanh

Với sự đa dạng của kích cỡ màn hình ngày càng tăng trong thì việc thiết kế một khối duy nhất chiếm độ rộng toàn bộ màn hình không còn là hợp lý. Các giải pháp truyền thống cho việc này là chia nhỏ các khối trong cột bằng tay, một việc tốn khá nhiều thời gian hoặc chia nhỏ khối div bằng các dòng lệnh js hoặc jQuery.

Vậy chúng ta có cách nào sử dụng CSS trong trường hợp này mà không cần sử dụng hệ thống GridView kết hợp với thuộc tính float truyền thống ?

CSS3 không những cung cấp cho bạn cách giải quyết mà còn cung cấp cho bạn khả năng thiết lập một phân cách, khoảng trống giữa các cột. Đây là giải pháp hiệu quả cho bạn khi cần bố trí dạng bảng hoặc GridView.

Trình duyệt hỗ trợ
Điều quan trọng cần lưu ý là trong khi tất cả các trình duyệt hiện tại hỗ trợ đa cột trong CSS3 - thậm chí có IE10. Bạn cần sử dụng webkit (-webkit-) và mozilla (-moz-) cho Google Chrome và Mozilla Firefox nhưng không cần -ms- hoặc -o- cho Opera.

Thuộc tính:
column-count: Khai báo số cột được áp dụng cho phần tử.
column-width: Độ rộng của của từng cột. Lưu ý giá trị này có thể thay đổi đối với từng trình duyệt.
column-gap: Độ rộng của khoảng cách giữa các cột
column-rule-width: Định nghĩa chung các thuộc tính cho cột
column-rule-style: Định nghĩa style cho cột
column-rule-color: Định nghĩa màu
column-span: Giá trị có tương tự với colspan và rowspan trong bảng

Ví dụ:

//CSS
.cols3 {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;

-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;

column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}

.cols3 h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

//HTML
<div class='cols3'>
<h1>Integer posuere erat a ante</h1>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.</p>
</div>


Output:

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?