Bố cục CSS - Ví dụ nổi
Trang này chứa các ví dụ nổi phổ biến.
Lưới hộp / Hộp có chiều rộng bằng nhau
Hộp 1
Hộp 2
Hộp 1
Hộp 2
Hộp 3
Với thuộc tính float , thật dễ dàng để thả nổi các hộp nội dung cạnh nhau:
Ví dụ
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three
boxes (use 25% for four, and 50% for two, etc) */
padding:
50px; /* if you want space between the images */
} Hãy tự mình thử »Kích thước hộp là gì?
Bạn có thể dễ dàng tạo ba hộp nổi cạnh nhau. Tuy nhiên, khi bạn thêm thứ gì đó làm tăng chiều rộng của mỗi hộp (ví dụ: phần đệm hoặc đường viền), hộp sẽ bị vỡ. Thuộc box-sizing cho phép chúng ta bao gồm phần đệm và đường viền trong tổng chiều rộng (và chiều cao) của hộp, đảm bảo rằng phần đệm nằm bên trong hộp và nó không bị vỡ.
Bạn có thể đọc thêm về thuộc tính box-sizing trong Chương CSS Box Sizing của chúng tôi.
Hình ảnh cạnh nhau
Lưới các hộp cũng có thể được sử dụng để hiển thị các hình ảnh cạnh nhau:
Ví dụ
.img-container {
float: left;
width: 33.33%; /* three
containers (use 25% for four, and 50% for two, etc) */
padding:
5px; /* if you want space between the images */
} Hãy tự mình thử » Hộp có chiều cao bằng nhau
Trong ví dụ trước, bạn đã học cách thả nổi các hộp cạnh nhau với chiều rộng bằng nhau. Tuy nhiên, không dễ để tạo ra các hộp nổi có chiều cao bằng nhau. Tuy nhiên, cách khắc phục nhanh là đặt chiều cao cố định, như trong ví dụ bên dưới:
Hộp 1
Một số nội dung, một số nội dung, một số nội dung
Hộp 2
Một số nội dung, một số nội dung, một số nội dung
Một số nội dung, một số nội dung, một số nội dung
Một số nội dung, một số nội dung, một số nội dung
Tuy nhiên , điều này không linh hoạt lắm. Sẽ ổn thôi nếu bạn có thể đảm bảo rằng các hộp sẽ luôn có cùng lượng nội dung trong đó. Nhưng nhiều khi nội dung không giống nhau. Nếu bạn thử ví dụ trên trên điện thoại di động, bạn sẽ thấy nội dung của ô thứ hai sẽ hiển thị bên ngoài ô. Đây là lúc CSS3 Flexbox phát huy tác dụng - vì nó có thể tự động kéo dài các hộp thành hộp dài nhất:
Ví dụ
Sử dụng Flexbox để tạo hộp linh hoạt:
Mẹo: Bạn có thể đọc thêm về Mô-đun bố cục Flexbox trong Chương CSS Flexbox của chúng tôi.
Chức năng điều hướng
Bạn cũng có thể sử dụng float với danh sách siêu liên kết để tạo menu ngang:
Ví dụ về bố cục web
Người ta cũng thường thực hiện toàn bộ bố cục web bằng thuộc tính float :
Ví dụ
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content:
"";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
} Hãy tự mình thử »Thêm ví dụ
Hình ảnh có đường viền và lề nổi về bên phải trong đoạn văn
Để một hình ảnh nổi ở bên phải trong một đoạn văn. Thêm đường viền và lề cho hình ảnh.
Một hình ảnh có chú thích nổi ở bên phải
Để hình ảnh có chú thích nổi ở bên phải.
Để chữ cái đầu tiên của đoạn trôi sang bên trái
Để chữ cái đầu tiên của đoạn nổi sang trái và tạo kiểu cho chữ cái.
Tạo một trang web với float
Sử dụng float để tạo trang chủ với thanh điều hướng, đầu trang, chân trang, nội dung bên trái và nội dung chính.
Tất cả thuộc tính nổi CSS
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
| clear | Specifies what should happen with the element that is next to a floating element |
| float | Specifies whether an element should float to the left, right, or not at all |
| overflow | Specifies what happens if content overflows an element's box |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |
