Trong bài viết này, chúng ta sẽ thảo luận lần lượt từng phương pháp đã đề cập và đưa ra một ví dụ phù hợp của từng phương pháp.
Vậy hãy bắt đầu!
Phương pháp 1: Đặt hai bộ phận cạnh nhau trong CSS bằng cách sử dụng lưới
CSS “ lưới ”Cho phép người dùng đặt hai hoặc nhiều hơn hai div cạnh nhau. Về cơ bản, lưới là một giá trị của thuộc tính hiển thị được sử dụng để tạo bố cục bao gồm các hàng và cột.
Cú pháp
Cú pháp của thuộc tính hiển thị với bố cục lưới được đưa ra dưới đây:
hiển thị: lưới
Bây giờ, hãy xem một ví dụ liên quan đến việc đặt hai div cạnh nhau trong CSS bằng cách sử dụng bố cục lưới.
Thí dụ
Ở đây, chúng ta sẽ tạo hai div con bên trong div cha, có tên lớp là “ cha mẹ ',' đứa trẻ ' và ' đứa trẻ ”:
< div lớp = 'cha mẹ' >< div lớp = 'đứa trẻ' > < / div >
< div lớp = 'đứa trẻ' > < / div >
< / div >
Tiếp theo trong phần CSS, hãy sử dụng “ .cha mẹ ”Để truy cập div chính và đặt giá trị của thuộc tính hiển thị là“ lưới ”. Tiếp theo, đặt phân số bằng cách sử dụng “ lưới-mẫu-cột ”Để tạo khoảng trống cho các cột. Trong trường hợp của chúng tôi, chúng tôi sẽ đặt phân số là “ 1fr ' và ' 1fr ”, Có nghĩa là cả hai div đều có được không gian bằng nhau. Hơn nữa, chúng tôi sẽ đặt khoảng cách giữa hai cột bằng cách sử dụng thuộc tính cột-gap và đặt giá trị của nó là “ 25px ”.
CSS:
.cha mẹ {trưng bày : lưới ;
lưới-mẫu-cột : 1fr 1fr ;
cột-khoảng cách : 25px ;
}
Trong bước tiếp theo, chúng tôi sử dụng “ .đứa trẻ ”Để truy cập cả div con và đặt chiều cao của các div là“ 250px ”Và đặt màu nền là“ rgb (253, 5, 109) ”:
.đứa trẻ {Chiều cao : 250px ;
lai lịch : rgb ( 253 , 5 , 109 ) ;
}
Điều này sẽ cho thấy kết quả sau:
Hãy chuyển sang một phương pháp khác để đặt div cạnh nhau
Phương pháp 2: Đặt hai Div cạnh nhau trong CSS bằng cách sử dụng flex
Các ' uốn cong ”Là giá trị của thuộc tính hiển thị cho phép đặt hai div cạnh nhau. Thuộc tính này được sử dụng để đặt độ dài linh hoạt cho mục linh hoạt. Nó thu nhỏ hoặc phát triển vật phẩm uốn cong để vừa với hộp đựng của nó.
Cú pháp
Cú pháp của thuộc tính hiển thị với flex được đưa ra dưới đây:
hiển thị: flex;Hãy chuyển sang ví dụ để hiểu khái niệm đã nêu.
Thí dụ
Chúng tôi sẽ xem xét cùng một tệp HTML và áp dụng “ uốn cong ”Vào vùng chứa mẹ. Ở đây, chúng tôi sẽ đặt giá trị của thuộc tính hiển thị là flex và đặt khoảng cách giữa các div con là “ 10px ”:
.cha mẹ {trưng bày : uốn cong ;
khoảng cách : 10px ;
}
Sau đó, đặt chiều rộng, chiều cao và màu nền của div là “ 650px ',' 200px ', và “Rgb (0, 255, 42) ', tương ứng:
.đứa trẻ {bề rộng : 650px ;
Chiều cao : 200px ;
lai lịch : rgb ( 0 , 255 , 42 ) ;
}
Kết quả của đoạn mã nhất định được đưa ra dưới đây:
Phương pháp 3: Đặt hai khối cạnh nhau trong CSS bằng cách sử dụng float
Thuộc tính float CSS chỉ định hướng nổi của một phần tử. Cụ thể hơn, thuộc tính này có thể được sử dụng để đặt hai div cạnh nhau trong CSS.
Cú pháp
Cú pháp của thuộc tính float là:
float: không có | trái | phảiĐây là mô tả cho các giá trị đã cho ở trên:
- không ai: Nó được sử dụng để hạn chế thả nổi.
- bên trái: Nó được sử dụng để làm nổi các phần tử ở phía bên trái.
- bên phải: Nó được sử dụng để làm nổi các phần tử ở phía bên phải.
Hãy chuyển sang ví dụ về việc đặt các div cạnh nhau.
Thí dụ
Bây giờ, chúng ta sẽ tạo hai div bên trong thẻ
và gán tên lớp là “ div1 ' và ' div2 ”: < thân hình >< div lớp = 'div1' > < / div >
< div lớp = 'div2' > < / div >
< / thân hình >
Sau đó sử dụng ' .div1 ' và ' .div2 ”Để truy cập các vùng chứa được thêm vào trong phần HTML. Chúng ta sẽ sử dụng cả hai div trong cùng một lớp vì các thuộc tính và giá trị mà chúng ta sẽ gán cho cả hai đều giống nhau.
Tiếp theo, chúng tôi chỉ định giá trị của thuộc tính float là “ bên trái ”Và đặt chiều rộng và chiều cao của div là“ năm mươi% ' và ' 40% ”. Chúng tôi cũng sử dụng thuộc tính box-sizing và đặt giá trị của nó là “ hộp viền ”. Hơn nữa, hãy đặt màu nền của div là “ rgb (7, 255, 222) ”Và đặt các giá trị của thuộc tính biên giới là“ 3px ',' chất rắn ', và ' rgb (255, 0, 255) ”:
.div1 , .div2 {trôi nổi : bên trái ;
bề rộng : năm mươi% ;
Chiều cao : 40% ;
kích thước hộp : hộp viền ;
lai lịch : rgb ( 7 , 255 , 222 ) ;
biên giới : 3px chất rắn rgb ( 255 , 0 , 255 ) ;
}
Ghi chú: Bạn có thể đặt hai div cạnh nhau mà không cần sử dụng thuộc tính box-sizing và thuộc tính đường viền bằng cách đặt các màu nền khác nhau của các div.
Khi bạn triển khai mã trên, hãy thực thi tệp HTML và xem kết quả:
Ghi chú: Để tạo khoảng cách giữa hai div, trước tiên hãy tạo một div khác và sau đó đặt lề của div tương ứng.
Sự kết luận
Các đơn vị có thể được đặt cạnh nhau bằng cách sử dụng ba phương pháp CSS khác nhau, đó là “ uốn cong ' và ' lưới Các giá trị 'của thuộc tính hiển thị và' trôi nổi ' tài sản. Mỗi phương pháp đều hoạt động hiệu quả; tuy nhiên, bạn có thể sử dụng bất kỳ trong số chúng theo yêu cầu của chúng tôi. Trong hướng dẫn này, chúng tôi đã thảo luận về ba phương pháp để đặt div cạnh nhau Sử dụng CSS và cung cấp các ví dụ liên quan.