[Học CSS] Bài 15: Chia cột trong CSS với float và overflow

Trong bài này chúng ta sẽ tìm hiểu về cách chia cột trong CSS sử dụng thuộc tính float và overflow.

Chia cột trong CSS

Một trang HTML mặc định thì nó không có chia cột, nội dung nó hiển thị một cột từ trên xuống dưới. Và để chia cột thì chúng ta có thể sử dụng thuộc tính float.

Ví dụ: bây giờ mình sẽ tạo 03 cái cột cho trang HTML, trong đó có một cái lớn bao bọc hai cái còn lại như sau:

Trong ví dụ trên mình đã tạo một cái khung bao ngoài có chiều rộng là 600px, cột nội dung mình cho nó rộng 60%, cột sidebar là 30%, còn dư 10% dành cho padding.

Các bạn để ý trong CSS dành cho khung nội dung (#khung-noi-dung) mình cho nó float: left; (nằm bên trái); còn thằng #khung-sidebar cho nó float: right; (nằm bên phải);

Cuối cùng thì được kết quả như các bạn xem demo đó, bây giờ một trang web của chúng ta được chia ra làm 02 cột, mỗi cột chiếm 60% và 30% chiều rộng của khung 600px.

Sử dụng thuộc tính overflow

Ở phần trên chúng ta đã chia cột ra làm 02, đó là phần chia về chiều rộng, còn chiều cao thì sao nhỉ ? Các bạn xem demo sẽ thấy rằng phần nội dung bài viết nó bị tràn ra khỏi cái khung lớn đúng không nào ? Như vậy sẽ rất là xấu, do đó chúng ta sẽ sử dụng thuộc tính overflow để cho cái khung lớn nó tự động thay đổi chiều cao tổng thể để và khít với chiều cao với khung nội dung bên trong.

Để sử dụng thuộc tính overflow các bạn phải xóa đi phần height 200px của khung bao ngoài (#khung-bao-ngoai ), tiếp theo là thêm vào đoạn CSS.overflow: auto; và xem kết quả nhé !

Mình cũng nói thêm, thuộc tính overflow nó sẽ có các giá trị như sau:

  • visible: Khi chiều cao của box không đủ chứa text, thì text vẫn hiển thị tràn qua box, đây là mặc định.
  • hidden: Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được ẩn đi.
  • scroll: Khi chiều cao của box không đủ chứa text, thì phần text bị tràn sẽ được ẩn đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
  • auto: Khi chiều cao của box không đủ chứa text, thì thanh scroll sẽ tự động hiển thị.

Oke, thì bài này nội dung nhiêu đây thôi, chúng ta chỉ cần chia được trang HTML ra làm hai cột như vậy là được rồi. Sẽ còn nhiều thứ để làm và chúng ta sẽ thực hiện trong những bài tiếp theo.

Bài học trước đó và tiếp theo

[Học CSS] Bài 15: Chia cột trong CSS với float và overflow
4.3 (86.67%) 9 votes
- TÁC GIẢ BÀI VIẾT -

Hocban.vn

Tác giả tại Tịnh Nguyễn Blog
Bài viết bạn vừa xem được thực hiện bởi Tịnh Nguyễn, một thanh niên đẹp zai chuẩn sói ca, có sở thích vọc vạch về máy tính và Internet, hiện tại là ác min của Hocban.vn. Đây là các bài viết của anh ấy !
Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Viết bình luận theo mẫu

(Các mục bắt buộc được đánh dấu * )