Share Tạo các cột nội dung với CSS3

filiallion · 05/09/2018

Trước đây để tạo ra các cột nội dung thì các bạn phải sử dụng thuộc tính float của CSS để vẽ, nhưng hiện nay với CSS3, cụ thể là với thuộc tính column-count thì việc tạo các cột nội dung trở nên dễ dàng hơn rất nhiều. Bài viết này tôi sẽ hướng dẫn các bạn sử dụng thuộc tính column-count để tạo ra các cột nội dung như trình bày trên trang báo chí.

Như tôi đã nói ở trên thì việc tạo ra các cột nội dung là đơn giản chỉ với nội dung mã lệnh CSS như sau:

CSS:

.column {
    column-count: 3;
}

Và các bạn thử tạo ra các cột nội dung như sau:

HTML:

<p class="column">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Share Tạo các cột nội dung với CSS3

filiallion

Administrator