Ví dụ về thuộc tính columns

Thuộc tính columns

Thuộc tính columns: Xác định chiều rộng và số lượng cột.

HTML viết:

Hiển thị trình duyệt khi chưa có columns:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3

Thêm thuộc tính columns, CSS viết:

div {
    columns: 200px;
    -moz-columns: 200px;
    -webkit-columns: 200px;
    -o-columns: 200px;
    -ms-columns: 200px;
}

Hiển thị trình duyệt khi có columns:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Số cột tự động hình thành theo công thức: chiều rộng của thành phần chia cho chiều rộng cột.

Thêm thuộc tính columns với số nguyên, CSS viết:

div {
    columns: 4;
    -moz-columns: 4;
    -webkit-columns: 4;
    -o-columns: 4;
    -ms-columns: 4;
}

Hiển thị trình duyệt khi có columns: 4

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Nếu chiều rộng không được khai báo, mà khai báo số nguyên thì số nguyên chính là số cột.

Thuộc tính column-count

Thuộc tính column-count : Xác định số lượng cho cột.

Thêm thuộc tính column-count, CSS viết:

div {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -o-column-count: 2;
    -ms-column-count: 2;
}

Hiển thị trình duyệt khi có column-count:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-count với giá trị auto, CSS viết:

div {
    columns: auto;
    -moz-columns: auto;
    -webkit-columns: auto;
    -o-columns: auto;
    -ms-columns: auto;
}

Hiển thị trình duyệt khi có column-count: auto

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thuộc tính column-gap

Thuộc tính column-gap : Xác định số lượng cho cột.

Thêm thuộc tính column-gap, CSS viết:

div {
    columns: 3;
    column-gap: 10px;
    -moz-columns: 3;
    -moz-column-gap: 10px;
    -webkit-columns: 3;
    -webkit-column-gap: 10px;
    -o-columns: 3;
    -o-column-gap: 10px;
    -ms-columns: 3;
    -ms-column-gap: 10px;
}

Hiển thị trình duyệt khi có column-gap:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-gap với giá trị 30px, CSS viết:

div {
    columns: 3;
    column-gap: 30px;
    -moz-columns: 3;
    -moz-column-gap: 30px;
    -webkit-columns: 3;
    -webkit-column-gap: 30px;
    -o-columns: 3;
    -o-column-gap: 30px;
    -ms-columns: 3;
    -ms-column-gap: 30px;
}

Hiển thị trình duyệt khi có column-count: 30px

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-gap với giá trị normal, CSS viết:

div {
    columns: 3;
    column-gap: normal;
    -moz-columns: 3;
    -moz-column-gap: normal;
    -webkit-columns: 3;
    -webkit-column-gap: normal;
    -o-columns: 3;
    -o-column-gap: normal;
    -ms-columns: 3;
    -ms-column-gap: normal;
}

Hiển thị trình duyệt khi có column-count: normal

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Trả lại khoảng cách các cột như bình thường.

Thuộc tính column-rule-style

Thuộc tính column-rule-style: Thiết lập kiểu của các đường kẻ giữa các cột.

Thêm thuộc tính column-rule-style: dashed, CSS viết:

div {
    columns: 3;
    column-rule-style: dashed;
    -moz-columns: 3;
    -moz-column-rule-style: dashed;
    -webkit-columns: 3;
    -webkit-column-rule-style: dashed;
    -o-columns: 3;
    -o-column-rule-style: dashed;
    -ms-columns: 3;
    -ms-column-rule-style: dashed;
}

Hiển thị trình duyệt khi có column-rule-style: dashed

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: dotted, CSS viết:

div {
    columns: 3;
    column-rule-style: dotted;
    -moz-columns: 3;
    -moz-column-rule-style: dotted;
    -webkit-columns: 3;
    -webkit-column-rule-style: dotted;
    -o-columns: 3;
    -o-column-rule-style: dotted;
    -ms-columns: 3;
    -ms-column-rule-style: dotted;
}

Hiển thị trình duyệt khi có column-rule-style: dotted

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: double, CSS viết:

div {
    columns: 3;
    column-rule-style: double;
    -moz-columns: 3;
    -moz-column-rule-style: double;
    -webkit-columns: 3;
    -webkit-column-rule-style: double;
    -o-columns: 3;
    -o-column-rule-style: double;
    -ms-columns: 3;
    -ms-column-rule-style: double;
}

Hiển thị trình duyệt khi có column-rule-style: double

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: groove, CSS viết:

div {
    columns: 3;
    column-rule-style: groove;
    -moz-columns: 3;
    -moz-column-rule-style: groove;
    -webkit-columns: 3;
    -webkit-column-rule-style: groove;
    -o-columns: 3;
    -o-column-rule-style: groove;
    -ms-columns: 3;
    -ms-column-rule-style: groove;
}

Hiển thị trình duyệt khi có column-rule-style: groove

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: hidden, CSS viết:

div {
    columns: 3;
    column-rule-style: hidden;
    -moz-columns: 3;
    -moz-column-rule-style: hidden;
    -webkit-columns: 3;
    -webkit-column-rule-style: hidden;
    -o-columns: 3;
    -o-column-rule-style: hidden;
    -ms-columns: 3;
    -ms-column-rule-style: hidden;
}

Hiển thị trình duyệt khi có column-rule-style: hidden

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: inset, CSS viết:

div {
    columns: 3;
    column-rule-style: inset;
    -moz-columns: 3;
    -moz-column-rule-style: inset;
    -webkit-columns: 3;
    -webkit-column-rule-style: inset;
    -o-columns: 3;
    -o-column-rule-style: inset;
    -ms-columns: 3;
    -ms-column-rule-style: inset;
}

Hiển thị trình duyệt khi có column-rule-style: inset

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: none, CSS viết:

div {
    columns: 3;
    column-rule-style: none;
    -moz-columns: 3;
    -moz-column-rule-style: none;
    -webkit-columns: 3;
    -webkit-column-rule-style: none;
    -o-columns: 3;
    -o-column-rule-style: none;
    -ms-columns: 3;
    -ms-column-rule-style: none;
}

Hiển thị trình duyệt khi có column-rule-style: none

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: outset, CSS viết:

div {
    columns: 3;
    column-rule-style: outset;
    -moz-columns: 3;
    -moz-column-rule-style: outset;
    -webkit-columns: 3;
    -webkit-column-rule-style: outset;
    -o-columns: 3;
    -o-column-rule-style: outset;
    -ms-columns: 3;
    -ms-column-rule-style: outset;
}

Hiển thị trình duyệt khi có column-rule-style: outset

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: ridge, CSS viết:

div {
    columns: 3;
    column-rule-style: ridge;
    -moz-columns: 3;
    -moz-column-rule-style: ridge;
    -webkit-columns: 3;
    -webkit-column-rule-style: ridge;
    -o-columns: 3;
    -o-column-rule-style: ridge;
    -ms-columns: 3;
    -ms-column-rule-style: ridge;
}

Hiển thị trình duyệt khi có column-rule-style: ridge

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-style: solid, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
}

Hiển thị trình duyệt khi có column-rule-style: solid

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thuộc tính column-rule-color

Thuộc tính column-rule-color : Thiết lập màu của các đường kẻ giữa các cột.

Thêm thuộc tính column-rule-color, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    column-rule-color: #cc0000;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -moz-column-rule-color: #cc0000;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-color: #cc0000;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -o-column-rule-color: #cc0000;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
    -ms-column-rule-color: #cc0000;
}

Hiển thị trình duyệt khi có column-rule-color:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thuộc tính column-rule-width

Thuộc tính column-rule-width : Thiết lập chiều rộng của các đường kẻ giữa các cột.

Thêm thuộc tính column-rule-width, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    column-rule-width: 5px;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: 5px;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 5px;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -o-column-rule-width: 5px;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
    -ms-column-rule-width: 5px;
}

Hiển thị trình duyệt khi có column-rule-width:

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-width: medium, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    column-rule-width: medium;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: medium;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: medium;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -o-column-rule-width: medium;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
    -ms-column-rule-width: medium;
}

Hiển thị trình duyệt khi có column-rule-width: medium

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-width: thin, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    column-rule-width: thin;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: thin;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: thin;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -o-column-rule-width: thin;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
    -ms-column-rule-width: thin;
}

Hiển thị trình duyệt khi có column-rule-width: thin

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thêm thuộc tính column-rule-width: thick, CSS viết:

div {
    columns: 3;
    column-rule-style: solid;
    column-rule-width: thick;
    -moz-columns: 3;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: thick;
    -webkit-columns: 3;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: thick;
    -o-columns: 3;
    -o-column-rule-style: solid;
    -o-column-rule-width: thick;
    -ms-columns: 3;
    -ms-column-rule-style: solid;
    -ms-column-rule-width: thick;
}

Hiển thị trình duyệt khi có column-rule-width: thick

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thuộc tính column-rule

Thuộc tính column-rule : Xác định các đường kẻ giữa các cột.

Sử dụng colum-rule, CSS viết:

div {
    columns: 3;
    column-rule: 5px double #0000cc;
    -moz-columns: 3;
    -moz-column-rule: 5px double #0000cc;
    -webkit-columns: 3;
    -webkit-column-rule: 5px double #0000cc;
    -o-columns: 3;
    -o-column-rule: 5px double #0000cc;
    -ms-columns: 3;
    -ms-column-rule: 5px double #0000cc;
}

Hiển thị trình duyệt khi có column-rule

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Thuộc tính column-span

Thuộc tính column-span : Xác định thành phần nằm trong một cột hay sắp xếp trong các cột.

HTML viết:

CSS viết:

div {
    columns: 3;
    -moz-columns: 3;
    -webkit-columns: 3;
    -o-columns: 3;
    -ms-columns: 3;
}

h3 { background: #cccccc; }

Hiển thị trình duyệt khi chưa có column-span:

Tieu de 01

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Tieu de 02

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Tieu de 03

Sử dụng colum-span: all, CSS viết:

div {
    columns: 3;
    column-span: all;
    -moz-columns: 3;
    -moz-column-span: all;
    -webkit-columns: 3;
    -webkit-column-span: all;
    -o-columns: 3;
    -o-column-span: all;
    -ms-columns: 3;
    -ms-column-span: all;
}

h3 { background: #cccccc; }

Hiển thị trình duyệt khi có column-span: 1

Tieu de 01

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Tieu de 02

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Tieu de 03

Sử dụng colum-span: 1, CSS viết:

div {
    columns: 3;
    column-span: 1;
    -moz-columns: 3;
    -moz-column-span: 1;
    -webkit-columns: 3;
    -webkit-column-span: 1;
    -o-columns: 3;
    -o-column-span: 1;
    -ms-columns: 3;
    -ms-column-span: 1;
}

h3 { background: #cccccc; }

Hiển thị trình duyệt khi có column-span:

Tieu de 01

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Tieu de 02

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Tieu de 03

Thuộc tính column-width

Thuộc tính column-width : Xác định chiều rộng các cột.

Sử dụng colum-width, CSS viết:

div {
    columns: 3;
    column-width: 200px;
    -moz-columns: 3;
    -moz-column-width: 200px;
    -webkit-columns: 3;
    -webkit-column-width: 200px;
    -o-columns: 3;
    -o-column-width: 200px;
    -ms-columns: 3;
    -ms-column-width: 200px;
}

Hiển thị trình duyệt khi có column-width

Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1

Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2

Ví dụ về thuộc tính columns

HTML viết:

Hiển thị trình duyệt khi chưa có columns:

Thêm thuộc tính columns, CSS viết:

Hiển thị trình duyệt khi có columns:

Thêm thuộc tính columns với số nguyên, CSS viết:

Hiển thị trình duyệt khi có columns: 4

Thêm thuộc tính column-count, CSS viết:

Hiển thị trình duyệt khi có column-count:

Thêm thuộc tính column-count với giá trị auto, CSS viết:

Hiển thị trình duyệt khi có column-count: auto

Thêm thuộc tính column-gap, CSS viết:

Hiển thị trình duyệt khi có column-gap:

Thêm thuộc tính column-gap với giá trị 30px, CSS viết:

Hiển thị trình duyệt khi có column-count: 30px

Thêm thuộc tính column-gap với giá trị normal, CSS viết:

Hiển thị trình duyệt khi có column-count: normal

Thêm thuộc tính column-rule-style: dashed, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: dashed

Thêm thuộc tính column-rule-style: dotted, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: dotted

Thêm thuộc tính column-rule-style: double, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: double

Thêm thuộc tính column-rule-style: groove, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: groove

Thêm thuộc tính column-rule-style: hidden, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: hidden

Thêm thuộc tính column-rule-style: inset, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: inset

Thêm thuộc tính column-rule-style: none, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: none

Thêm thuộc tính column-rule-style: outset, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: outset

Thêm thuộc tính column-rule-style: ridge, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: ridge

Thêm thuộc tính column-rule-style: solid, CSS viết:

Hiển thị trình duyệt khi có column-rule-style: solid

Thêm thuộc tính column-rule-color, CSS viết:

Hiển thị trình duyệt khi có column-rule-color:

Thêm thuộc tính column-rule-width, CSS viết:

Hiển thị trình duyệt khi có column-rule-width:

Thêm thuộc tính column-rule-width: medium, CSS viết:

Hiển thị trình duyệt khi có column-rule-width: medium

Thêm thuộc tính column-rule-width: thin, CSS viết:

Hiển thị trình duyệt khi có column-rule-width: thin

Thêm thuộc tính column-rule-width: thick, CSS viết:

Hiển thị trình duyệt khi có column-rule-width: thick

Sử dụng colum-rule, CSS viết:

Hiển thị trình duyệt khi có column-rule

HTML viết:

CSS viết:

Hiển thị trình duyệt khi chưa có column-span:

Tieu de 01

Tieu de 02

Tieu de 03

Sử dụng colum-span: all, CSS viết:

Hiển thị trình duyệt khi có column-span: 1

Tieu de 01

Tieu de 02

Tieu de 03

Sử dụng colum-span: 1, CSS viết:

Hiển thị trình duyệt khi có column-span:

Tieu de 01

Tieu de 02

Tieu de 03

Sử dụng colum-width, CSS viết:

Hiển thị trình duyệt khi có column-width

Ví dụ thuộc tính columns