Trong ví dụ này, chúng tôi đã sử dụng phần đệm CSS, thuộc tính lề. Thuộc tính đệm tạo không gian đệm trên tất cả các mặt của nội dung phần tử. Thuộc tính lề trong CSS tạo khoảng trống xung quanh phần tử. Ngoài ra, bạn có thể chọn bất kỳ màu nào bạn muốn từ bộ chọn màu cho văn bản
Title of the document
Flex property example
GREEN
BLUE
GRAY
PINK
Ở đây, chúng tôi đã sử dụng thuộc tính hiển thị với giá trị "flex". Thuộc tính hiển thị xác định loại hộp được sử dụng cho phần tử HTML. Giá trị "flex" hiển thị một phần tử dưới dạng bộ chứa flex cấp khối
Title of the document
Flex property example
GREEN
BLUE
GRAY
PINK
YELLOW
Trong ví dụ trên, chúng tôi đã sử dụng thuộc tính hiển thị với giá trị "khối nội tuyến", hiển thị một phần tử dưới dạng bộ chứa khối cấp độ nội tuyến. Ngoài ra, chúng tôi đã sử dụng thuộc tính font-family cho phép tạo danh sách ưu tiên các tên họ phông chữ và/hoặc họ chung cho phần tử được chọn
Tôi đã thêm đường viền và phần đệm vào div để bạn có thể dễ dàng nhìn thấy chính xác điều gì đang diễn ra hơn. Đường viền màu trắng đặc dày hơn ở bên ngoài là .float-container
div, có 20px phần đệm
Sau đó, mỗi phần tử .float-child
có đường viền màu đỏ mỏng hơn và thêm một số phần đệm. Sau đó, các khối màu thực tế là phần tử con của phần tử .float-child
. [Bạn sẽ thấy lý do tại sao trong một chút. ]
Để đặt các div cạnh nhau, chúng tôi đang sử dụng thuộc tính
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
3 để di chuyển từng phần tử .float-child
sang bên tráiVì 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. Chúng phù hợp vì chúng ta có hai div .float-child
, mỗi div có 50% chiều rộng
Và khoảng cách giữa các div được tạo bằng cách thêm phần đệm vào 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 từng cột vào div bên 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ả hai khối nằm cạnh nhau
Chà, điều gì sẽ xảy ra nếu chúng ta chỉ có các div .float-child
không có phần đệm và thay vào đó cố gắng thêm khoảng trống bằng cách đặt một giá trị
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
9 vào khối đầu tiên như thế này?HTML
Float Column 1
Float Column 2
CSS
.float-child.green {
margin-right: 20px;
}
Trong trường hợp này, cả hai phần tử .float-child
sẽ chiếm 50% tổng chiều rộng. Nhưng phần tử màu xanh đầu tiên cũng sẽ có lề là 20px
Điều này có nghĩa là cả hai khối sẽ chiếm 50% + 20px + 50% chiều rộng. Đây sẽ là 20px lớn hơn 100% chiều rộng, nghĩa là không có đủ chỗ cho cả hai cạnh nhau
Sau đó, khối màu xanh lam thứ hai sẽ quấn sang hàng tiếp theo bên dưới khối đầu tiên và trôi về bên trái ở đó
Bạn có thể thử điều chỉnh độ rộng sao cho chúng là 48% hoặc một 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 ở độ 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ì sử dụng float
Hãy xem xét một trong những điều 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 mình
HTML
Flex Column 1
Flex Column 2
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 ta đã đặt
Float Column 1
Float Column 2
1 trên phần tử cha
Float Column 1
Float Column 2
2. Cái này bật flexboxSau đó, trong mỗi phần tử
Float Column 1
Float Column 2
3, chúng tôi đang thiết lập
Float Column 1
Float Column 2
4. Con số này giống như một tỷ lệ so sánh độ rộng của từng phần tử con trong phần tử flex gốcVì chúng giống nhau nên không gian có sẵn sẽ được chia đều. Và vì chúng ta có hai phần tử con nên 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 lề và nó sẽ vẫn vừa
Lưu ý rằng chúng ta đã thêm khoảng trống bằng cách thêm
Float Column 1
Float Column 2
5 vào chỉ phần tử
Float Column 1
Float Column 2
3 đầu tiên. 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 chính xác các pixel. 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ử mà bạn 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 cách đó 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 chồng hai div này dưới cái kia cho thiết bị di động, chúng tôi sẽ phải loại bỏ thuộc tính
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
}
9 cho chiều rộng của thiết bị di độngHoặ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 phần tử
Float Column 1
Float Column 2
3, tương tự như những gì chúng ta đã làm với phương thức floatNó không trực quan 100%, nhưng nó vẫn hoạt động. Nếu bạn cần tạo bố cục đáp ứng phức tạp hơn với flexbox, bạn sẽ cần ghi nhớ điều này
Bây giờ chúng ta hãy xem 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
Phương pháp lưới CSS
Và đây là cách bạn có thể đặt hai div cạnh nhau, sử dụng lưới CSS
HTML
Grid Column 1
Grid Column 2
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 phần tử cha
Float Column 1
Float Column 2
9, chúng tôi bật lưới với .float-child.green {
margin-right: 20px;
}
0. Sau đó, chúng tôi thêm vào số lượng cột mà chúng tôi muốn trong bố cục của mình với thuộc tính .float-child.green {
margin-right: 20px;
}
1Chú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
.float-child.green {
margin-right: 20px;
}
2. Đ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 .float-child.green {
margin-right: 20px;
}
3 [fr = đơn vị phân số] không gianĐơn vị fr là tỷ lệ của mỗi cột so với cột khác, tương tự như quy tắc
Float Column 1
Float Column 2
4 mà chúng tôi đã sử dụng trong phương pháp flexbox. Việc đặt các cột thành .float-child.green {
margin-right: 20px;
}
2 có nghĩa là mỗi cột sẽ chiếm cùng một dung lượngThê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 phần đệ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
.float-child.green {
margin-right: 20px;
}
6 [hoặc .float-child.green {
margin-right: 20px;
}
7 trong các trình duyệt mới hơn] để tự động thêm khoảng trống vào mẫu lưới của mìnhChúng tôi đã đặt
.float-child.green {
margin-right: 20px;
}
6 thành 20px, vì vậy, trình duyệt sẽ biết thêm 20px khoảng cách 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 nhauVà 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 phần tử
Float Column 1
Float Column 2
9 gốc. Chúng tôi thực sự không phải viết bất kỳ CSS nào cho phần tử con
Flex Column 1
Flex Column 2
0