Hướng dẫn column html

Trang chủ
Tham khảo
CSS
CSS3
Thuộc tính column

Nội dung chính Show

Định nghĩa và sử dụng
Thuộc tính của column trong css3:
Thuộc tính column-span
Hiển thị trình duyệt khi có columns:
Thêm thuộc tính columns, CSS viết:
Hiển thị trình duyệt khi có column-count: normal
Thêm thuộc tính column-rule-style: none, CSS viết:
Thêm thuộc tính column-rule-style: none, CSS viết:
Thêm thuộc tính column-rule-width: medium, CSS viết:
Thêm thuộc tính column-rule-width: medium, CSS viết:
Sử dụng colum-rule, CSS viết:
Hiển thị trình duyệt khi có column-rule
Thuộc tính column-span
Sử dụng colum-span: 1, CSS viết:

Định nghĩa và sử dụng

Thuộc tính column trong css3 dùng để chia nội dung thành phần thành nhiều cột khác nhau, không cần phải sử dụng thuộc tính float trong css.

Thuộc tính của column trong css3:

Thuộc tính	giá trị	Ví dụ	Mô tả
column	đơn vị	column: 200px;	Xác định chiều rộng cho cột.
Số nguyên	column: 3;	Xác định số lượng cho cột.
column-count	Số nguyên	column: 3;	Xác định số lượng cho cột.
column-count	column-count: 3;	auto
column-count: auto;	đơn vị	column: 200px;	Xác định chiều rộng cho cột.
Số nguyên	column: 3;	Xác định số lượng cho cột.
column-count	column-count: 3;	auto	column-count: auto;
Số cột sẽ được xác định bởi các thuộc tính colum khác.	column-gap
column-gap: 30px;	Xác định khoảng cách giữa các cột.
normal	column-gap: normal;
Khoảng cách cột sẽ có giá trị như mặc định (1em).	column-rule-style
dashed	column-rule-style: dashed;
Thiết lập kiểu của các đường kẻ giữa các cột.	dotted
column-rule-style: dotted;	double
column-rule-style: double;	groove
column-rule-style: groove;	hidden
column-rule-style: hidden;	inset	column-rule-style: inset;	none
column-rule-style: none;	đơn vị	column: 200px;	Xác định chiều rộng cho cột.
Số nguyên	column: 3;	Xác định số lượng cho cột.
column-count	column-count: 3;	auto
column-count: auto;	Số cột sẽ được xác định bởi các thuộc tính colum khác.	column-gap
column-gap: 30px;	đơn vị	column: 200px;	Xác định chiều rộng cho cột.
Số nguyên	column-count: auto;
inset	none
column-rule-style: none;	1	outset	column-rule-style: outset;
ridge	column-rule-style: ridge;	solid
column-rule-style: solid;	đơn vị	column: 200px;	Xác định chiều rộng cho cột.
column-count	column-count: 3;	auto

column-count: auto;

column rule

Số cột sẽ được xác định bởi các thuộc tính colum khác.

column-gap

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

column-gap: 30px;

Xác định khoảng cách giữa các cột.

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:

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

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

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

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

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

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

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.

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 columns, CSS viết:

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

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 {
    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ó 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

Thêm thuộc tính columns, 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ó 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

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

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

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.

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;
}

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

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

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

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

Thuộc tính column-rule-style

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;
}

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.

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:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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

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

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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

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

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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

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

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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

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

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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: none, CSS viết:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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: none, CSS viết:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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: none, CSS viết:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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: 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:

p {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-rule: 1px dashed #cc0000;
    -moz-column-rule: 1px dashed #cc0000;
    -webkit-column-rule: 1px dashed #cc0000;
}

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: 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-width, 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ó 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: 200px;
    -moz-columns: 200px;
    -webkit-columns: 200px;
    -o-columns: 200px;
    -ms-columns: 200px;
}

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: medium, 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ó 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: medium, 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ó 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: 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:

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

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: 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

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

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

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

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

Thuộc tính column-rule

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

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:

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

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

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

Sử dụng colum-span: all, 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ó 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: 200px;
    -moz-columns: 200px;
    -webkit-columns: 200px;
    -o-columns: 200px;
    -ms-columns: 200px;
}

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

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

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

Thuộc tính column-width

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

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

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

Hướng dẫn column html - cột html

Định nghĩa và sử dụng

Thuộc tính của column trong css3:

column-count: auto;

Số cột sẽ được xác định bởi các thuộc tính colum khác.

column-gap

column-gap: 30px;

Thuộc tính column-span

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:

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

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.

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 columns, CSS viết:

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

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

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:

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

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

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-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-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-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-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: 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: 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: 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: 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: none, CSS viết:

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: none, CSS viết:

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: 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: 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: medium, CSS viết:

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: medium, CSS viết:

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

Tieu de 01

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:

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

Thuộc tính column-span

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