Chào mừng các bạn đến cùng với một chuyên môn rất quan trọng đặc biệt trong CSS Layout, mà đã từng làm nhiều người dân phải “sợ” nó, đó chính là học cách chia cột bên trên CSS. Nói cách khác rằng, website chúng ta soạn ra bằng văn phiên bản HTML sẽ luôn luôn có một cột duy nhất cơ mà nếu bạn muốn làm một website gồm hai hoặc những cột thì chắc chắn là phải dùng đến CSS.

Bạn đang xem: Chia thẻ div thành 2 cột

Bạn đang xem: phân tách thẻ div thành 2 cột

Chia cột trong CSS là rứa nào?

Việc phân chia cột trong CSS là vấn đề bạn thiết lập những thành phần con trong 1 phần tử mẹ nằm trên và một hàng. Ví dụ, mình thích phần văn bản website của bản thân có nhì cột thì mình sẽ khởi tạo ra 3 mẫu

Ở ví dụ như trên, mình bao gồm phần #content chứa hai cột sẽ là #post và #sidebar. Tại vì mình cần sử dụng thêm class container cho #content là vì mình thích sau này cũng muốn chia thêm cột mang đến các phần tử khác trong website thì sẽ có thể tái áp dụng cái class này, dễ dàng và đơn giản là thói quen của mình thôi chứ bạn không đề nghị cũng được.

Và bây giờ, nhiệm vụ của chúng ta trong bài xích này là đang làm cầm nào để loại #post và #sidebar nằm thẳng sản phẩm với nhau.

Các cách chia cột trong CSS

Khi chia cột trong CSS, chúng ta nên làm tuần từ bỏ đầy đủ các bước sau để phân tách cột được chính xác:

Các cột phải luôn có một container, tức là phần tử mẹ phủ quanh nó.Thiết lập chiều rộng đến container.Thiết lập chiều rộng mang lại hai cột, tổng chiều rộng trong nhì cột phải luôn luôn bằng hoặc ít hơn chiều rộng lớn của container.Nên áp dụng box-sizing: border-box để giám sát kích thước chủ yếu xác.Sử dụng ở trong tính float với giá trị left và right để đẩy bộ phận về quý phái trái hoặc phải.Tiến hành clear float.

Cách phân chia cột trong CSS

Bây giờ bản thân sẽ thực hiện chia cột dựa vào đoạn HTML mẫu ở bên trên nhé.

Trước tiên, chúng ta sẽ tiến hành cấu hình thiết lập chiều rộng mang lại class container, đề nghị thêm một chiếc border để tí nữa các bạn sẽ hiểu clear float là cố gắng nào:

/*==Thiết lập container==*/

.container width: 960px; border: 1px solid #333; padding: 10px;

Tiếp tục, họ thiết lập chiều rộng lớn của #post cùng mình sẽ ao ước cột #post sẽ chỉ chiếm 660px, bên cạnh đó thêm color cho nhị thằng này để dễ chú ý một xíu.

/*==cột #post==*/#post width: 660px; height: 150px; background: #e8e8e8;

Tương từ bỏ với #sidebar nhưng ta ước ao cột #sidebar chỉ 300px nhưng mà thôi.

/*==cột #sidebar==*/#sidebar width: 300px; height: 150px; background: #b1b1b1;

Giờ ta đã chiếm lĩnh được như vậy này:


*

phân tách cột với float cùng clear float 104">

float: left;Đồng thời, mình thích thằng #sidebar sẽ nhảy đầm qua bên phải đề nghị mình sẽ có được thuộc tính float cho nó với cái giá trị làright.

float: right;Kết trái thật dễ thương, hai em ấy đã nằm trên cùng một hàng.


*

chia cột với float cùng clear float 105">

Nhưng chúng ta có chú ý là loại container nó bị teo lại trên không? Nói đúng ra là hiện thời thằng #post với #sidebar sẽ nhảy thoát ra khỏi cái container luôn rồi. Ráng làm sao khiến cho 2 cột này hiển thị phía bên trong container đây? các bạn sẽ làm gì? Đặt height cho container lâu năm ra thêm hả? không hề, mà chúng ta sẽ tiến hành clear float.

Clear float là như thế nào?

Khi chúng ta sử dụng trực thuộc tính float thì tức là sẽ thiết lập cho 1 phần tử được đẩy lịch sự trái hoặc cần và cho phép các bộ phận gần đó rất có thể hiển thị phủ quanh xung xung quanh nó. Tuy vậy một vấn đề xảy ra là khi bạn cho cục bộ các thành phần trong một container float hết thì có nghĩa là thằng container cũng biến thành hiển thị phủ quanh xung quanh các thành phần được float, vì vậy nó mới bị cái lỗi bi ai cười như ở trên.

Do vậy khi triển khai float những phần tử, việc bạn buộc phải làm là phải tạo ra điểm kết thúc cho việc float này, tức là các bạn sẽ muốn nó bắt đầu không float chỗ nào nữa. Call theo thuật ngữ CSS là clear float.

Về clear float thì có nhiều cách, phụ thuộc vào trường đúng theo mà họ sẽ sử dụng cách phù hợp.

Xem thêm: Tổng Hợp Tài Liệu Css Nâng Cao Tiếng Việt Đầy Đủ, Chi Tiết, Dễ Hiểu

Cách 1. Thực hiện thẻ div trống

Bây tiếng mình vẫn viết một quãng CSS mang đến class tên là .clear như sau:

.clear clear: both

Thuộc tính clear này nghĩa là thiết lập không chất nhận được các phần tử khác float xuống nó, nó có các giá trị là left right both vànone. Và bạn chỉ nên dùng quý giá both thôi để clear cả hai bên.