Cách căn chỉnh hai thẻ div cạnh nhau (5 phương pháp hàng đầu)

Chào bạn đọc blog, hôm nay chúng ta sẽ nói về "Cách căn chỉnh hai thẻ div cạnh nhau". Trong HTML, có các kiểu phần tử inline và block. Các phần tử inline có thể đặt các phần tử cạnh nhau nhưng chúng không hỗ trợ thuộc tính chiều cao và chiều rộng theo mặc định, còn các phần tử block hỗ trợ thuộc tính chiều rộng và chiều cao theo mặc định nhưng chúng ta sẽ căn chỉnh các phần tử block như hai thẻ div cạnh nhau bằng cách sử dụng thuộc tính side.

Cách căn chỉnh hai thẻ div cạnh nhau (5 phương pháp hàng đầu)

Vậy, ở đây chúng ta có thể thấy cách chúng ta có thể làm cho nó hoạt động. Chúng ta sẽ xem cách thẻ div có thể nằm cạnh nhau theo 5 cách khác nhau.

5 phương pháp hàng đầu để căn chỉnh hai thẻ div cạnh nhau

•     hiển thị: inline-block (cách truyền thống)
•     Phương thức flexbox của CSS
•     Phương thức lưới CSS
•     hiển thị: phương thức bảng
•     thuộc tính nổi
•     CSS Subgrid (phiên bản mới nhất, 2023 trở lên)

1. Sử dụng display: inline-block

Thuộc tính này giúp định vị các phần tử khối cạnh nhau. Tuy nhiên, chúng ta cần thêm thuộc tính chiều rộng cho phần tử khối vì theo mặc định, phần tử khối chiếm toàn bộ chiều rộng.

HTML-CSS

<div class="element">
  </div>
  <div class="element">
  </div>

<style>
.element {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #ce8888;}
</style>

Preview

Tips: Bạn có thể thay đổi CSS (style) theo yêu cầu của mình.

2. Sử dụng flexbox

Flexbox là một phương pháp hiện đại để thiết kế định dạng của một trang web và flexbox không phải lúc nào cũng là một thuộc tính đơn lẻ mà là cả một mô-đun với nhiều tính năng khác nhau.

Hãy cùng xem cách chúng ta có thể căn chỉnh các thẻ div liền kề nhau bằng flexbox.

HTML-CSS

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>

<style>
.container {display: flex;}
.item {background: #ce8888; flex-basis: 100px; height: 100px; margin: 5px;}
</style>

Preview

Tips: Bạn có thể thay đổi CSS (style) theo yêu cầu của mình.

3. Sử dụng lưới CSS (CSS grid)

CSS Grid là một phương pháp tuyệt vời khác để thiết kế trang web và toàn bộ mô-đun của nó đi kèm với một số tính năng.

Hãy xem cách chúng ta có thể hiển thị các phần tử div thông qua việc sử dụng lưới CSS.

HTML-CSS

<div class="container">
      <div class="item"></div>
      <div class="item"></div>
</div>

<style>
 .container {display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px; grid-column-gap: 5px;}
      
.item {background: #ce8888;}
</style>

Preview

Tips: Bạn có thể thay đổi CSS (style) theo yêu cầu của mình.

4. Sử dụng display table

Thuộc tính này là một lựa chọn thay thế cho thẻ <table>