Div cạnh CSS

Trong HTML, có hai loại phần tử nội tuyến và phần tử khối. Các phần tử nội tuyến có thể đặt 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 và các phần tử khối hỗ trợ thuộc tính chiều rộng và chiều cao theo mặc định nhưng chúng ta không thể đặt các phần tử khối như hai div cạnh nhau

Vì vậy, ở đây chúng ta có thể xem Làm thế nào chúng ta có thể làm cho nó hoạt động

chúng ta sẽ xem cách div có thể đặt cạnh nhau theo 5 cách khác nhau

• trưng bày. khối nội tuyến (cách truyền thống)
• phương pháp flexbox css
• phương pháp lưới css
• trưng bày. phương pháp bảng
• tài sản nổi

Đăng ký để nhận nội dung mới nhất và tất cả nội dung mà chúng tôi không xuất bản

Địa chỉ email.

Để trống trường này nếu bạn là người.

Sử dụng màn hình. chặn Nội tuyến

trưng bày. thuộc tính khối nội tuyến giúp đặt 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 bổ sung vào phần tử khối vì phần tử khối theo mặc định chiếm 100% chiều rộng

ví dụ

//css

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

và đầu ra sẽ là

vui lòng kiểm tra ví dụ ở đây

sử dụng flexbox

flexbox là một cách hiện đại để thiết kế bố cục của trang web và flexbox không phải là một thuộc tính duy nhất, mô-đun hoàn chỉnh của nó, nó có một số tính năng

hãy xem cách chúng ta có thể sắp xếp các div cạnh nhau bằng cách sử dụng flexbox

//tệp html

// tập tin css

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

//đầu ra

trưng bày. thuộc tính flex được cấp cho vùng chứa để tạo phần tử con trong ngữ cảnh flex và sắp xếp các div cạnh nhau

Trong ví dụ trên, Bạn có thể thấy chúng tôi đã sử dụng thuộc tính flex-basis được sử dụng để cung cấp độ rộng tối thiểu cho mục. Để hiểu chi tiết về flexbox, vui lòng xem phần này

vui lòng tìm bản demo tại đây

Sử dụng lưới css

Lưới CSS là một cách tiếp cận tuyệt vời khác để thiết kế trang web và nó là mô-đun hoàn chỉnh đ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 div cạnh nhau bằng css grid

//html

// tập tin css

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

và đầu ra sẽ là

hiển thị thuộc tính. lưới bật cấu trúc bố cục lưới

Trong file CSS thuộc tính grid-template-columns giúp chia trang thành số cột, ta cho 100px 2 lần thì nó sẽ tạo ra 2 cột

Đó là mô-đun rất lớn, tôi nghĩ bạn nên kiểm tra chi tiết trước rồi mới sử dụng nó

Tìm bản demo tại đây

Sử dụng bảng hiển thị

display: table property is an alternative for

tag

hãy xem cách chúng ta có thể phân phối div song song bằng cách sử dụng màn hình. thuộc tính bảng

//tệp html

// tập tin css

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

và đầu ra sẽ là

vui lòng tìm bản demo tại đây

bạn có thể mã trên màn hình. ví dụ về bảng sử dụng thẻ bảng html cũng như bên dưới

//tệp html

________số 8_______

// tập tin css

.container {
  display: table;
  width: 20%;
}
.table-row {
 
  display: table-row;
  height: 100px;
}
.table-cell {
  border: 1px solid;
  background: #ce8888;
  display: table-cell;
  padding: 2px;
}

và đầu ra sẽ là

Sử dụng thuộc tính float

Thuộc tính 

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

2 CSS đặt một phần tử ở bên trái hoặc bên phải của vùng chứa, cho phép các phần tử văn bản và nội tuyến bao quanh phần tử đó. Phần tử bị xóa khỏi luồng bình thường của trang, mặc dù vẫn còn là một phần của luồng

hãy xem cách chúng ta có thể hiển thị div cạnh nhau bằng cách sử dụng float

//tệp html

// tập tin css

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

1

và đầu ra sẽ là

Vui lòng xem demo tại đây

Phần kết luận

Có nhiều cách để sắp xếp các div cạnh nhau nhưng câu hỏi đặt ra là cách nào tốt hơn

Nó hoàn toàn phụ thuộc vào yêu cầu

flexbox và lưới CSS là những cách hiện đại để tạo bố cục cho trang web và đó là một mô-đun hoàn chỉnh và đi kèm với một số tính năng. Tôi khuyên dùng flexbox hoặc CSS grid nếu cần bố cục toàn bộ trang

Làm cách nào để đặt hai div cạnh nhau trong CSS?

Tại sao các div không ở cạnh nhau?