Dưới đây là 3 cách bạn có thể sử dụng CSS để đặt các phần tử div HTML cạnh nhau.
( Nhấp để chuyển đến từng phần)
- Phương thức float
- Phương pháp Flexbox
- Phương pháp lưới CSS
Phương pháp Float
Trong phương thức float, chúng tôi sẽ sử dụng đánh dấu HTML sau:
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>
.float-container chỉ đơn giản là phần tử mẹ chứa cả .float-child các phần tử.
Để đặt các div cạnh nhau, chúng ta sẽ sử dụng các quy tắc CSS sau:
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
} Mã kết quả sẽ giống như sau:
Tôi đã thêm đường viền và phần đệm vào các div để bạn có thể dễ dàng nhìn thấy chính xác những gì đang diễn ra. Đường viền trắng đặc dày hơn ở bên ngoài là .float-container div, có 20px đệm.
Sau đó, mỗi .float-child phần tử có viền đỏ mỏng hơn và nhiều phần đệm hơn. Sau đó, các khối màu thực tế là các phần tử con của .float-child các yếu tố. (Bạn sẽ biết lý do sau một chút.)
Để đặt các div cạnh nhau, chúng tôi đang sử dụng float thuộc tính float từng .float-child phần tử bên trái.
Vì cả hai đều nổi ở bên trái nên chúng sẽ hiển thị cạnh nhau nếu có đủ không gian cho cả hai vừa. Chúng phù hợp vì chúng ta có hai .float-child div, mỗi div có chiều rộng 50%.
Và khoảng cách giữa các div được tạo bằng cách thêm phần đệm trong mỗi .float-child div, sau đó chứa các khối màu.
Thêm khoảng cách giữa các cột bằng cách lồng mỗi cột trong một div ngoài
Các khối màu cần có một div bên ngoài (.float-child ) để thêm không gian và cũng có thể đặt cả hai khối cạnh nhau.
Chà, điều gì sẽ xảy ra nếu chúng ta chỉ có .float-child div không có phần đệm và thay vào đó, cố gắng thêm khoảng trắng bằng cách đặt margin-right giá trị trên khối đầu tiên như thế này?
HTML:
<div class="float-container">
<div class="float-child green">
Float Column 1
</div>
<div class="float-child blue">
Float Column 2
</div>
</div>
CSS:
.float-child.green {
margin-right: 20px;
}
Trong trường hợp này, cả .float-child các phần tử sẽ chiếm 50% tổng chiều rộng. Nhưng phần tử màu xanh lá cây đầu tiên cũng sẽ có lề 20px.
Điều này có nghĩa là cả hai khối sẽ chiếm 50% + 20px + 50% chiều rộng. Chiều rộng này sẽ lớn hơn 100% chiều rộng 20px, nghĩa là không có đủ chỗ cho cả hai cạnh nhau.
Sau đó, khối màu xanh lam thứ hai sẽ chuyển sang hàng tiếp theo bên dưới khối đầu tiên và trôi về bên trái tại đó:
Bạn có thể cố gắng điều chỉnh độ rộng để chúng bằng 48% hoặc một số con số khác nhỏ hơn 50% để vừa với chúng. Nhưng nó sẽ không chính xác.
Đó là lý do tại sao cá nhân tôi thích gói các khối trong một div bên ngoài được đặt ở chiều rộng 50%, với phần đệm để thêm khoảng cách giữa các div.
Ngày nay, việc sử dụng các phương thức khác, mới hơn trong CSS để đặt các div cạnh nhau dễ dàng hơn thay vì đặt float.
Hãy xem xét một trong những phương pháp này:phương pháp flexbox!
Phương pháp Flexbox
Với flexbox, chúng ta có thể sử dụng một cách trực quan hơn để căn chỉnh hai phần tử div của chúng ta.
HTML:
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
CSS:
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
Với flexbox, chúng tôi đã đặt display: flex trên .flex-container chính yếu tố. Điều này sẽ bật flexbox.
Sau đó, trong mỗi .flex-child , chúng tôi đang đặt flex: 1 . Con số này giống như một tỷ lệ so sánh chiều rộng của mỗi phần tử con trong phần tử flex cha.
Vì chúng giống nhau nên không gian có sẵn sẽ được chia đều. Và vì chúng tôi có hai phần tử con, mỗi phần tử sẽ chiếm 50%.
Đây là mã kết quả sẽ trông như thế nào:
Thêm khoảng cách giữa các div bằng cách sử dụng một lề và nó sẽ vẫn vừa khít!
Lưu ý rằng chúng tôi đã thêm không gian bằng cách thêm margin-right: 20px chỉ .flex-child đầu tiên yếu tố. Tuy nhiên, flexbox đủ thông minh để cân nhắc thêm 20px khi chia phần còn lại của chiều rộng có sẵn.
Điều này có nghĩa là bạn có thể thêm không gian với lề mà không cần phải tính toán các pixel chính xác. Flexbox sẽ phù hợp với nội dung cho bạn!
Đây là một lý do lớn mà tôi yêu thích flexbox.
Tuy nhiên, nếu bạn có nhiều phần tử muốn bố trí trong một lưới đáp ứng, thì không phải lúc nào bạn cũng biết mình cần thêm khoảng trống đó vào đâu giữa các phần tử.
Trong trường hợp của chúng tôi, nếu chúng tôi muốn xếp hai div một dưới cái kia cho thiết bị di động, chúng tôi sẽ phải lấy ra margin-right đó thuộc tính cho chiều rộng di động.
Hoặc bạn có thể thêm một phần tử bên ngoài bổ sung cộng với phần đệm cho mỗi .flex-child , tương tự như những gì chúng tôi đã làm với phương thức float.
Nó không trực quan 100%, nhưng nó vẫn sẽ hoạt động. Nếu bạn cần tạo các bố cục đáp ứng phức tạp hơn với flexbox, bạn cần ghi nhớ điều này.
Bây giờ chúng ta hãy xem xét phương pháp mới nhất mà bạn có thể sử dụng để đặt các div cạnh nhau:lưới CSS.
CSS Grid Method
Và đây là cách bạn có thể đặt hai div cạnh nhau bằng cách sử dụng lưới CSS:
HTML:
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}Và đây là mã sẽ trông như thế nào:
Một thay đổi lớn với lưới là trước tiên bạn xác định mẫu lưới sẽ trông như thế nào. Có nghĩa là bạn muốn có bao nhiêu cột và / hoặc hàng trong bố cục của mình.
Trong trường hợp của chúng tôi, chúng tôi muốn hai cột có chiều rộng bằng nhau. Vì vậy, trong .grid-container mẹ , chúng tôi bật lưới với display: grid . Sau đó, chúng tôi thêm bao nhiêu cột mà chúng tôi muốn trong bố cục của mình với grid-template-columns tài sản.
Chúng tôi muốn hai cột có chiều rộng bằng nhau, vì vậy chúng tôi đặt nó thành 1fr 1fr . Điều này yêu cầu trình duyệt tạo bố cục hai cột và mỗi cột chiếm 1fr (fr =đơn vị phân số) của không gian.
Đơn vị fr là tỷ lệ của mỗi cột với một cột khác, tương tự như flex: 1 quy tắc chúng tôi đã sử dụng trong phương thức flexbox. Đặt các cột thành 1fr 1fr nghĩa là mỗi cột sẽ chiếm cùng một lượng không gian.
Thêm khoảng cách giữa các mục lưới với thuộc tính grid-gap
Một lợi ích lớn khi sử dụng lưới CSS là bạn không cần sử dụng đệm hoặc lề để thêm khoảng cách giữa các mục lưới.
Bạn có thể sử dụng grid-gap (hoặc gap trong các trình duyệt mới hơn) để tự động thêm không gian trong mẫu lưới của bạn.
Chúng tôi đã đặt grid-gap thành 20px, vì vậy trình duyệt sẽ biết thêm 20px không gian giữa tất cả các mục, cho dù chúng nằm cạnh nhau hay xếp chồng lên nhau.
Và bạn có thể nhận thấy rằng tất cả các thuộc tính CSS cho lưới đã được đặt trên .grid-container mẹ yếu tố. Chúng tôi thực sự không phải viết bất kỳ CSS nào cho con .grid-child các phần tử!