Chia Thẻ Div Thành 2 Cột

      10

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

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

Bạn sẽ xem: phân chia thẻ div thành 2 cột

Chia cột trong CSS là cầm cố nào?

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

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

Và bây giờ, nhiệm vụ của bọn họ trong bài xích này là đã làm rứa nào để chiếc #post và #sidebar nằm thẳng mặt hàng với nhau.

Các bước chia cột vào CSS

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

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

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

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

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

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

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

Tiếp tục, chúng ta thiết lập chiều rộng của #post với mình sẽ ước ao cột #post sẽ chỉ chiếm 660px, đôi khi thêm color cho nhị thằng này nhằm dễ nhìn một xíu.

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

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

Xem thêm: 2 Phần Mềm Thay Đổi Tốc Độ Video Online Đơn Giản Nhất, Free Speed Video

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

Giờ ta đã có được như gắng này:


*

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

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

float: right;Kết quả thật dễ thương, hai em ấy vẫn nằm trên và một hàng.


*

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

Nhưng chúng ta có xem xét là mẫu container nó bị teo lại bên trên không? Nói chính xác là bây giờ thằng #post và #sidebar đang nhảy thoát khỏi cái container luôn luôn rồi. Cố gắng làm sao để 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 mang đến container dài ra thêm hả? không hề, mà chúng ta sẽ thực hiện clear float.

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

Khi chúng ta sử dụng nằm trong tính float thì tức là sẽ tùy chỉnh thiết lập cho một trong những phần tử được đẩy quý phái trái hoặc phải và chất nhận được các thành phần gần đó có thể hiển thị bao bọc xung xung quanh nó. Tuy vậy một vấn đề xẩy ra là khi bạn cho toàn bộ các thành phần trong một container float không còn thì tức là thằng container cũng trở thành hiển thị bao bọc xung xung quanh các phần tử được float, bởi vậy nó new bị dòng lỗi bi hùng cười như sinh sống trên.

Do vậy khi thực hiện float các phần tử, việc bạn yêu cầu làm là phải tạo nên điểm dứt cho vấn đề float này, tức là bạn sẽ muốn nó bắt đầu không float ở chỗ nào nữa. điện thoại tư vấn theo thuật ngữ CSS là clear float.

Về clear float thì có không ít cách, tùy thuộc vào trường phù hợp mà chúng ta sẽ áp dụng cách phù hợp.

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

Bây giờ mình vẫn viết một đoạn CSS đến class thương hiệu là .clear như sau:

.clear clear: both

Thuộc tính clear này nghĩa là cấu hình thiết lập không có thể chấp 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ới bạn nên làm dùng quý hiếm both thôi nhằm clear cả hai bên.

hotlive |

Hi88