Bài 10: Thuộc tính float trong CSS

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;
}
Chia sẻ bài viết

Bài 10: Thuộc tính float trong CSS

Hoặc copy địa chỉ

Nội dung

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon