L布局 CSS - Ví dụ về chìm

Trang này cung cấp các ví dụ thường gặp về nổi.

Lưới / Khung đồng rộng

Box 1
Box 2
Box 1
Box 2
Box 3

Bằng cách sử dụng float Thuộc tính, có thể dễ dàng làm nổi bật nội dung khung song song:

Ví dụ

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Ba khung (bốn khung sử dụng 25%, hai khung sử dụng 50%, v.v.) */
  padding: 50px; /* Nếu cần thêm khoảng cách giữa các hình ảnh */
}

Thử ngay

Box-sizing là gì?

Bạn có thể dễ dàng tạo ra ba khung nổi song song. Tuy nhiên, khi bạn thêm một số nội dung để mở rộng độ rộng của mỗi khung (ví dụ: lề hoặc viền) thì khung sẽ bị hỏng. box-sizing Thuộc tính cho phép chúng ta bao gồm lề trong tổng độ rộng (và độ cao) của khung, đảm bảo rằng lề vẫn ở trong khung mà không bị vỡ.

Bạn có thể trong CSS Box Sizing Trong chương này, bạn sẽ học thêm về thuộc tính box-sizing.

Hình ảnh song song

Loại lưới này (The grid of boxes) cũng có thể được sử dụng để hiển thị hình ảnh song song:

Ví dụ

.img-container {
  float: left;
  width: 33.33%; /* Ba khung (bốn khung sử dụng 25%, hai khung sử dụng 50%, v.v.) */
  padding: 5px; /* Nếu cần thêm khoảng cách giữa các hình ảnh */
}

Thử ngay

Khung đồng rộng

Trong ví dụ trước, bạn đã học cách để làm nổi bật các khung với độ rộng bằng nhau. Tuy nhiên, việc tạo ra các khung có độ cao bằng nhau không dễ dàng. Tuy nhiên, giải pháp nhanh chóng là đặt độ cao cố định, như ví dụ sau:

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

Ví dụ

.box {
  height: 500px;
}

Thử ngay

Nhưng, việc làm này sẽ mất đi sự柔性. Nếu bạn có thể đảm bảo rằng luôn có cùng số lượng nội dung trong khung, thì điều đó là được. Nhưng nhiều khi nội dung lại khác nhau. Nếu bạn thử ví dụ trên trên điện thoại, bạn sẽ thấy nội dung của khung thứ hai sẽ hiển thị ngoài khung. Đây là nơi CSS3 Flexbox phát huy tác dụng - vì nó có thể tự động kéo dãn khung để làm cho nó có cùng chiều dài với khung dài nhất:

Ví dụ

Tạo khung柔性 bằng Flexbox:

Box 1 - Đây là một số văn bản, để đảm bảo nội dung thực sự rất cao. Đây là một số văn bản, để đảm bảo nội dung thực sự rất cao. Đây là một số văn bản, để đảm bảo nội dung thực sự rất cao. Đây là một số văn bản, để đảm bảo nội dung thực sự rất cao. Đây là một số văn bản, để đảm bảo nội dung thực sự rất cao.
Box 2 - Chiều cao của tôi sẽ theo box 1.

Thử ngay

Vấn đề duy nhất của Flexbox là nó không hoạt động trong Internet Explorer 10 hoặc các phiên bản trước. Bạn có thể trong trang web của chúng tôi. CSS Flexbox Học thêm về mô-đun bố cục Flexbox trong phần này.

Trình đơn điều hướng

Để float Kết hợp với danh sách liên kết siêu链接 để tạo menu ngang:

Ví dụ

Thử ngay

Ví dụ về bố cục Web

Sử dụng float Thuộc tính hoàn thành toàn bộ bố cục Web cũng rất phổ biến:

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%;
}

Thử ngay

Các ví dụ khác

Hình ảnh có viền và lề trôi sang phải của đoạn văn
Để hình ảnh trôi sang phải của đoạn văn. Thêm viền và lề cho hình ảnh.
Hình ảnh có tiêu đề trôi sang phải
Để hình ảnh có tiêu đề trôi sang phải.
Để chữ cái đầu tiên của đoạn văn trôi sang trái
Để chữ cái đầu tiên của đoạn văn trôi sang trái và thiết lập phong cách cho chữ cái đó.
Tạo một trang web bằng cuộn
Sử dụng cuộn để tạo trang chủ có thanh điều hướng ngang, tiêu đề, chân trang, thanh điều hướng bên trái và nội dung chính.

Tất cả các thuộc tính cuộn CSS

Thuộc tính Mô tả
box-sizing Định nghĩa cách tính toán chiều rộng và chiều cao của yếu tố: liệu chúng có bao gồm lề trong và viền hay không.
clear Đ指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float Đ指定 phần tử nên nổi như thế nào.
overflow Đ指定 khi nội dung tràn ra khung phần tử sẽ xảy ra điều gì.
overflow-x Đ指定 khi nội dung của phần tử tràn ra vùng nội dung khi nội dung tràn ra, cách xử lý cạnh trái/phải của nội dung.
overflow-y Đ指定 khi nội dung của phần tử tràn ra vùng nội dung khi nội dung tràn ra, cách xử lý cạnh trên/dưới của nội dung.