Trang chủ » HTML và CSS » Cách tạo 2 thẻ div ngang nhau, cùng 1 dòng

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 nay 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:

2 Thẻ div cùng trên 1 dòng
2 Thẻ div cùng trên 1 dòng

 – Cách thứ 2 là bạn sử dụng thuộc tính position trong CSS, nhưng đối với những bạn mới thì sử dụng nó khá là khó và việc responsive trên các màn điện thoại khiến các bạn tốn rất nhiều thời gian nên mình không giới thiệu ở đây. Nếu có khó khăn gì thì inbox mình qua facebook hoặc gửi mail mình hỗ trợ nhé <3

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *