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
Grid Example
// 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