Thuộc tính float trong CSS có 3 loại (3 vị trí):
- 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; }