Bài 10: Thuộc Tính Float Trong CSS - Cùng Học Web

Trang chủ » Chia Cột Với Float Trong Css » Bài 10: Thuộc Tính Float Trong CSS - Cùng Học Web

Có thể bạn quan tâm

Thuộc tính float trong CSS có 3 loại (3 vị trí):

Trong bài này có

  • 1. Cách 1: Sử dụng table
  • 2. Cách 2: Dùng thẻ div định dạng trên 2 cột
  • left: Nằm phía bên trái
  • right: Nằm phía bên phải
  • none: Nằm tại chính vị trí của nó (trạng thái bình thường)

Chia bổ cục có 2 cách:

  • Cách 1: Sử dụng table để chia thành cách vị trí. Cách này quá thông thường và đã tụt hậu nên mình không làm. (Không khuyến khích)
  • Cách 2: Sử dụng thẻ div (hoặc các thẻ header, footer trong HTML5) kết hợp với float:left – float:right để chia thành các vị trí. (Khuyên dùng)
1. Cách 1: Sử dụng table

Để sử dụng table chia cột, định dạng trang, ta viết như sau:

<table> <tr> <td></td> <td></td> <td></td> </tr> </table>

Trong đó:

  • table là bảng
  • tr là dòng
  • td là cột

Ghi chú: Nếu muốn thêm 1 dòng, thì thêm 1 thuộc tính tr

2. Cách 2: Dùng thẻ div định dạng trên 2 cột

Sau đây mình ví dụ là dùng thẻ div với id là container, nếu bạn không thích dùng ID thì có thể dùng CLASS, thay id=”container” bằng class=”container” là được.

<body> <div id="container"> ... </div> </body>

Và chúng ta viết CSS cho nó:

#container{ width: 1000px; /*Rộng 1000px*/ margin: 0px auto; /*Canh giữa màn hình*/ text-align: center; /*Text bên trong canh giữa*/ font-size: 30px; /*Font chữ 30px*/ color: #FFF; /*Font màu trắng*/ }

Giao diện bước này chưa có gì, để có nội dung, ta nên định dạng layout theo cách khác nhau, ví dụ dưới đây mình sẽ phân ra thành 3 cột.

<body> <div id="container"> <div id="row1"> Nội dung cột 1 </div> <div id="row2"> Nội dung cột 2 </div> <div id="row3"> Nội dung cột 3 </div> </div> </body>

Thì CSS ta có thể viết như sau:

#container{ width: 1000px; /*Rộng 1000px*/ margin: 0px auto; /*Canh giữa màn hình*/ text-align: center; /*Text bên trong canh giữa*/ font-size: 30px; /*Font chữ 30px*/ color: #FFF; /*Font màu trắng*/ } #container > row1{ width: 33%; background: red; height: 200px; float: left; } #container > row2{ width: 33%; background: green; height: 200px; float: left; } #container > row3{ width: 33%; background: blue; height: 200px; float: left; }

Từ khóa » Chia Cột Với Float Trong Css