Cách tạo 2 thẻ div ngang nhau, cùng 1 dòng

Tạo 2 thẻ div ngang nhau, cùng 1 dòng bạn sử dụng thuộc tính Float trong CSS để có thể làm 2 thẻ div, thậm chí 3,4,5...n thẻ div nằm trên cùng 1 dòng. Xem ngay ví dụ dưới đây nào!!!

Hôm này mình sẽ hướng dẫn các bạn cách tạo 2 thẻ div ngang nhau, cùng 1 dòng dùng CSS. Sẽ có rất nhiều cách xử lý khác nhau nhưng mà hôm nay mình sẽ đi sâu vào cách dùng thuộc tính Float trong CSS

Cách 1: Sử dụng thuộc tính Float trong CSS tạo 2 thẻ div ngang nhau, cùng 1 dòng

Bước 1: Tạo 1 file .html và thêm đoạn mã HTML như dưới đây

<div class="container_swap">

     <div class="div_left">Thẻ div bên trái</div>

     <div class="div_right">Thẻ div bên phải </div>

</div>

Đoạn code trên bao gồm: Thẻ div với class="container_swap" bao gồm 2 thẻ div (thẻ div class="div_left" và thẻ div class="div_right") mà bạn muốn cho nó nằm cùng 1 dòng

Bước 2: Thêm đoạn mã CSS dưới đây, bạn có thể thêm trực tiếp vào file .html vừa tạo hoặc tạo file .css rồi dẫn link đến file css đó

<style>

.container_swap{

width: 400px;

}

.div_left{

width: 200px;

float: left;

text-align: center;

}

.div_right{

width: 200px;

float: left;

text-align: center;

}

</style>

Bạn sẽ có được kết quả như sau:

Xem thêm bài viết về: Cách tạo 2 thẻ div ngang nhau, cùng 1 dòng

‍