Chia cột với float trong css
Một trong những kỹ thuật rất quan trọng trong CSS Layout, một kỹ thuật mà nhiều người phải “sợ” nó, chính làm cách nào để chia cột chuẩn bằng CSS. Một website chỉ có mã nguồn HTML (không dùng các Framework như Bootstrap) thì chỉ có một cột duy nhất. Nếu như bạn muốn chia website thành hai hoặc nhiều cột thì phải làm như thế nào và rút gọn độ dài code nhất? Khi đó chúng ta cần phải dùng đến CSS và cụ thể là dùng CSS
Float. Chia cột trong CSS là gì?Dùng CSS chia cột là bạn phải thiết lập hai hoặc nhiều phần tử con trong phân tử mẹ cùng nằm trên một hàng. Ví dụ: Trước tiên muốn chia nội dung website thành hai cột thì
phải tạo 3 thẻ Theo thói quen của mình thường dùng class Lưu ý, khi chia cột trong CSS, bạn nên làm theo đầy đủ các bước để chia cột chính xác: Cách chia cột trong CSS Bây giờ cùng bắt đầu chia cột dựa theo source HTML mẫu ở trên nhé. Bước tiếp theo là thiết lập độ rộng của #post và #sidebar. Thằng #post mình muốn nó chiếm 660px và màu mè xíu cho
dễ nhìn giữa hai thằng. Còn thằng #sidebar chỉ 300px thôi. Đây là kết quả đã đạt được: Thế là thằng Đồng thời, muốn Sau khi thiết lập xong các thuộc tính thì hai em nó đã chung một hàng. Nhưng mà nếu như ảnh trên thì bạn có thể thấy cái Khi ta sử dụng thuộc tính float thì có nghĩa là cấu hình cho phần tử đó được đẩy sang trái hoặc phải và cho phép các phần tử gần đó có thể hiển thị bao bọc xung quanh nó. Như vấn đề ở đây là khi bạn cho toàn bộ các phần tử trong một container float hết thì nghĩa là thằng class container cũng sẽ hiển thị bao bọc xung quanh các phần tử được float, do đó nó mới bị cái lỗi buồn cười như ở trên. Vì vậy khi tiến hành float các phần tử, việc bạn nên làm là phải tạo ra
điểm kết thúc cho việc float này, nghĩa là bạn sẽ muốn nó bắt đầu không float ở đâu nữa. Thuật ngữ này chính là clear float. Có nhiều cách clear float, tùy theo trường hợp mà chúng ta sẽ sử dụng cách phù hợp. Đây là một cách rất phổ biến, đó là tạo một thẻ Giờ mình sẽ
viết một đoạn CSS cho class=”clear” như sau: Thuộc tính clear này có nghĩa là thiết lập không cho phép các phần tử khác float xuống nó, nó có các giá trị là Bây giờ, mình sẽ tạo một thẻ 01 02 03 04 05 06 07 Kết quả đạt được: Cách này thì phải gọi là nhanh gọn lẹ, không cần chỉnh sửa HTML mà chỉ cần viết thêm Kết quả chả khác gì ở trên. Như vậy chúng mình đã chia sẽ xong về cách chia cột khi sử dụng css float rồi. Hy vọng những kiến thức trên giúp bạn hiểu hơn và có thể áp dụng float và trong những project của mình. Cảm ơn các bạn đã theo dõi! |