CHIA THẺ DIV THÀNH 2 CỘT

      188

Chào mừng chúng ta cho với cùng một nghệ thuật cực kỳ đặc trưng vào CSS Layout, mà lại đã có lần làm cho không ít người nên “sợ” nó, đó đó là học cách phân tách cột bên trên CSS. cũng có thể nói rằng, website các bạn soạn ra bằng vnạp năng lượng bạn dạng HTML đã luôn luôn luôn luôn bao gồm một cột tuyệt nhất mà nếu như bạn muốn có tác dụng một website tất cả nhì hoặc các cột thì chắc hẳn rằng yêu cầu dùng cho CSS.

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


Chia cột vào CSS là vậy nào?

Việc phân tách cột vào CSS là Việc các bạn thiết lập số đông thành phần con trong một trong những phần tử chị em nằm trên cùng một hàng. lấy một ví dụ, bạn muốn phần nội dung website của mình gồm nhị cột thì bản thân sẽ khởi tạo ra 3 loại

Ở ví dụ trên, mình gồm phần #content cất nhị cột đó là #post và #sidebar. Ssinh sống dĩ bản thân cần sử dụng thêm class container đến #content nguyên nhân là mình muốn sau này có muốn chia thêm cột cho các thành phần không giống vào trang web thì vẫn có thể tái áp dụng chiếc class này, dễ dàng và đơn giản là kinh nghiệm của mình thôi chứ bạn không đề xuất cũng được.

Và hiện thời, trọng trách của họ vào bài xích này là vẫn làm cầm như thế nào nhằm loại #post cùng #sidebar ở trực tiếp mặt hàng với nhau.

Các bước phân tách cột trong CSS

lúc phân chia cột vào CSS, bạn nên làm tuần trường đoản cú vừa đủ công việc sau để phân chia cột được thiết yếu xác:

Các cột cần luôn gồm một container, Tức là bộ phận chị em bao quanh nó.Thiết lập chiều rộng cho container.Thiết lập chiều rộng lớn mang lại hai cột, tổng chiều rộng lớn trong nhị cột buộc phải luôn luôn bằng hoặc thấp hơn chiều rộng của container.Nên thực hiện box-sizing: border-box nhằm tính tân oán form size đúng chuẩn.Sử dụng ở trong tính float với mức giá trị left cùng right nhằm đẩy bộ phận về sang trọng trái hoặc phải.Tiến hành clear float.

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

Bây giờ đồng hồ bản thân sẽ thực hiện phân tách cột dựa trên đoạn HTML chủng loại nghỉ ngơi bên trên nhé.

Đầu tiên, chúng ta vẫn triển khai thiết lập cấu hình chiều rộng cho class container, đề xuất thêm một cái 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 với mình sẽ ao ước cột #post đang chiếm 660px, bên cạnh đó thêm Màu sắc đến nhì thằng này nhằm dễ dàng chú ý một xíu.

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

Tương từ với #sidebar dẫu vậy ta hy vọng cột #sidebar chỉ 300px mà lại thôi.

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

Giờ ta đã sở hữu được như vậy này:

*
Chia cột với float cùng clear float 104">

Okay, hiện thời bạn muốn chiếc #post nó đang nằm bên cạnh trái của #sidebar, đề xuất mình vẫn gắn thêm cho #post một trực thuộc tính float với mức giá trị làleft.

Xem thêm: Dung Lượng Tối Đa Của Google Drive Miễn Phí, Cách Nhận 1Tb Dung Lượng Google Drive Miễn Phí

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

float: right;Kết quả thật đáng yêu và dễ thương, nhì em ấy đang nằm trên và một mặt hàng.

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

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

Clear float là như vậy nào?

Khi bọn họ thực hiện trực thuộc tính float thì tức là đang cấu hình thiết lập cho một trong những phần tử được đẩy thanh lịch trái hoặc đề xuất với chất nhận được những thành phần bên gần đó có thể hiển thị bao quanh xung quanh nó. Thế nhưng lại một vấn đề xảy ra là khi chúng ta cho toàn thể các bộ phận trong một container float không còn thì Tức là thằng container cũng biến thành hiển thị phủ quanh xung quanh các phần tử được float, cho nên nó mới bị mẫu lỗi bi tráng cười cợt nlỗi ngơi nghỉ bên trên.

Do vậy Lúc tiến hành float các bộ phận, việc bạn nên làm cho là đề nghị tạo thành điểm hoàn thành đến việc float này, tức là các bạn sẽ ý muốn nó ban đầu không float chỗ nào nữa. Gọi theo thuật ngữ CSS là clear float.

Về clear float thì có nhiều cách, tùy thuộc vào trường hợp mà lại họ đang áp dụng giải pháp cân xứng.

Cách 1. Sử dụng thẻ div trống

Cách này khá thông dụng trường đoản cú thời trước, đó là bọn họ sẽ khởi tạo ra một class riêng biệt mang đến bài toán clear float với khai báo thêm 1 thẻ
 nữa cùng với class này rồi đặt nó dưới của cột cuối cùng.

Bây tiếng bản thân vẫn viết một quãng CSS mang đến class thương hiệu là .clear nlỗi sau:

.clear clear: both

Thuộc tính clear này tức thị thiết lập không được cho phép các bộ phận khác float xuống nó, nó gồm các quý hiếm là left right both vànone. Và chúng ta chỉ nên sử dụng giá trị both thôi để clear cả hai bên.