Bố cục nửa bên trái và nửa bên phải – Nhiều cách khác nhau | CSS-Thủ thuật – css cột bên trái và bên phải

Cách đây rất nhiều năm, chúng tôi đã đăng ý tưởng này ở đây trên CSS-Tricks. Chúng tôi nghĩ rằng đã đến lúc phải cập nhật điều đó và thực hiện công lý đối tượng.

Bạn đang xem : css cột bên trái và bên phải

Cách đây rất nhiều năm, chúng tôi đã đăng ý tưởng này tại đây trên CSS- Thủ thuật. Chúng tôi nghĩ rằng đã đến lúc cần cập nhật điều đó và thực thi vấn đề này.

Hãy tưởng tượng một tình huống mà bạn cần chia bố cục làm đôi. Nội dung bên trái và nội dung bên phải. Về cơ bản, hai cột có chiều cao bằng nhau là cần thiết bên trong một container. Mỗi bên chiếm đúng một nửa vùng chứa, tạo ra một khoảng ngắt giữa một bên. Giống như nhiều thứ trong CSS, có một số cách để giải quyết vấn đề này và chúng ta sẽ xem xét nhiều cách trong số đó ngay bây giờ!

Sử dụng Background Gradient

Một cách đơn giản mà chúng ta có thể tạo ra một nền thay đổi là sử dụng các gradient. Một nửa nền được đặt thành một màu và nửa còn lại có màu khác. Thay vì mờ dần từ màu này sang màu khác, điểm dừng màu không khoảng trắng được đặt ở giữa.

 . container {
  background: linear-gradient (
    qua phải,
    # ff9e2c 0%,
    # ff9e2c 50%,
    # b6701e 50%,
    # b6701e 100%
  );
}  

Điều này hoạt động với một phần tử vùng chứa duy nhất. Tuy nhiên, điều đó cũng có nghĩa là sẽ phải làm việc với float hoặc có thể là một số phương pháp bố cục khác nếu nội dung cần lấp đầy cả hai mặt của vùng chứa.

Xem Bút Nửa trái / nửa phải với Gradient nền của CSS-Tricks ( @ css-trick ) trên CodePen .

Sử dụng Định vị Tuyệt đối

Một lộ trình khác có thể là thiết lập hai vùng chứa bên trong vùng chứa mẹ, định vị chúng hoàn toàn, chia chúng ra làm đôi bằng cách sử dụng tỷ lệ phần trăm, sau đó áp dụng hình nền. Lợi ích ở đây là giờ đây chúng tôi có hai vùng chứa riêng biệt có thể chứa nội dung của riêng chúng.

Xem Bút Nửa trái / nửa phải với vị trí tuyệt đối bằng CSS-Tricks ( @ css-trick ) trên CodePen .

Định vị tuyệt đối đôi khi là một giải pháp hoàn hảo và đôi khi không thể thực hiện được. Vùng chứa mẹ ở đây sẽ cần phải có chiều cao đã đặt và việc đặt chiều cao thường là một tin xấu cho nội dung (nội dung thay đổi!). Chưa kể các phần tử được định vị tuyệt đối nằm ngoài luồng tài liệu. Vì vậy, sẽ rất khó để làm cho nội dung này hoạt động, chẳng hạn như đẩy nội dung khác xuống bên dưới nó.

Xem Thêm  Mệnh đề WHERE trong SQL - chọn trong mệnh đề where sql

Sử dụng bảng (giả)

Vâng, vâng, các bảng đã quá cũ kỹ (chưa kể là đầy rẫy các vấn đề về khả năng tiếp cận và sự thiếu linh hoạt trong bố cục). Chà, sử dụng thuộc tính display: table-cell; thực sự có thể là một cách tiện dụng để tạo bố cục này mà không cần viết đánh dấu bảng trong HTML. Tóm lại, chúng tôi biến vùng chứa mẹ ngữ nghĩa của mình thành một bảng, sau đó các vùng chứa con thành các ô bên trong bảng – tất cả đều trong CSS!

Xem Bút Nửa trái / nửa phải có bảng hiển thị bằng CSS-Tricks ( @ css-trick ) trên CodePen .

Bạn thậm chí có thể thay đổi các thuộc tính hiển thị tại các điểm ngắt khá dễ dàng tại đây, làm cho các cạnh xếp chồng lên nhau trên các màn hình nhỏ hơn. display: table; ( và bạn bè ) được hỗ trợ từ IE 8 và thậm chí cả Android cũ, vì vậy nó khá an toàn!

Sử dụng Floats

Chúng ta có thể sử dụng người bạn tốt của mình là float để sắp xếp các thùng chứa bên cạnh nhau. Lợi ích ở đây là nó tránh được vị trí tuyệt đối (như chúng tôi đã lưu ý, có thể lộn xộn).

Xem Pen Nửa trái / nửa phải có phao của CSS-Tricks ( @ css-trick ) trên CodePen .

Trong ví dụ này, chúng tôi đang đặt độ cao một cách rõ ràng để làm cho chúng bằng nhau. Nhưng bạn không thực sự có được khả năng đó với phao theo mặc định. Bạn có thể sử dụng thủ thuật chuyển màu nền mà chúng tôi đã đề cập để chúng trông đồng đều. Hoặc xem thủ thuật đặt lợi nhuận tiêu cực ưa thích và những thứ tương tự.

Ngoài ra, hãy nhớ rằng bạn có thể cần phải xóa các float trên phần tử mẹ để giữ cho dòng tài liệu luôn hài hòa.

Sử dụng Inline-Block

Nếu việc xóa các phần tử sau khi float dường như là một gánh nặng, thì việc sử dụng display: inline-block là một tùy chọn khác. Bí quyết ở đây là đảm bảo rằng các phần tử cho các bên riêng lẻ không có dấu ngắt hoặc khoảng trắng ở giữa chúng trong HTML. Nếu không, không gian đó sẽ được hiển thị dưới dạng khoảng trắng và nửa sau sẽ bị vỡ và rơi xuống.

Xem Bút Nửa trái / nửa phải với khối nội tuyến bằng CSS-Tricks ( @ css-trick < / span>) trên CodePen .

Xem Thêm  Bản đồ JavaScript - đối tượng bản đồ javascript w3schools

Một lần nữa, không có gì về khối nội tuyến giúp chúng tôi cân bằng chiều cao của các cạnh, vì vậy bạn sẽ phải rõ ràng về điều đó.

Ngoài ra còn có những cách tiềm năng khác để giải quyết vấn đề về khoảng cách được mô tả ở trên.

Sử dụng Flexbox

Flexbox là một cách khá tuyệt vời để thực hiện việc này, chỉ cần lưu ý rằng nó được giới hạn ở IE 10 trở lên và bạn có thể cần ưa thích với các tiền tố và giá trị để nhận được sự hỗ trợ tốt nhất.

Sử dụng phương pháp này, chúng tôi biến vùng chứa mẹ của mình thành một hộp linh hoạt với các vùng chứa con chiếm một phần không gian bằng nhau. Không cần đặt chiều rộng hoặc chiều cao! Flexbox chỉ biết phải làm gì, vì các giá trị mặc định được thiết lập hoàn hảo cho việc này. Ví dụ: flex-direction: row; align-items: Stret; là những gì chúng ta đang theo đuổi, nhưng đó là những mặc định nên chúng ta không phải đặt họ. Để đảm bảo chúng đều như vậy, việc đặt flex: 1; ở các bên là một kế hoạch tốt. Điều đó buộc họ phải chia sẻ không gian bằng nhau.

Xem Bút Nửa trái / nửa phải với Flexbox của CSS-Tricks ( @ css-trick ) trên CodePen .

Trong bản trình diễn này, chúng tôi cũng đang tạo các hộp chứa uốn cong bên, chỉ để giải trí, để xử lý căn giữa theo chiều dọc và chiều ngang.

Sử dụng Grid Layout

Đối với những người đang sống trên bờ vực chảy máu, kỹ thuật CSS Grid Layout giống như phương pháp Flexbox và Table được hợp nhất thành một. Nói cách khác, một vùng chứa được xác định, sau đó được chia thành các cột và ô có thể được lấp đầy linh hoạt bằng các phần tử con.

Nếu các ô trong bản trình diễn bên dưới được xếp chồng lên nhau, thì trình duyệt của bạn không hỗ trợ CSS Grid. Tại thời điểm viết bài này, chỉ hỗ trợ cho Firefox, Chrome, Safari và Opera (ngoại trừ Opera Mini).

Xem Pen Nửa trái / nửa phải với bố cục lưới bằng CSS-Tricks ( @ css-trick ) trên CodePen .

Không thú vị là có bao nhiêu cách để thực hiện mọi việc trong CSS phải không?


Xem thêm những thông tin liên quan đến chủ đề css cột bên trái và bên phải

CSS Grid cơ bản cho người mới toàn tập phần 1

  • Tác giả: evondev
  • Ngày đăng: 2021-05-14
  • Đánh giá: 4 ⭐ ( 6133 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 👉CSS Grid cơ bản cho người mới toàn tập phần 1
    👉 Tham khảo khoá học cơ bản của mình: https://evondev.com/khoa-hoc-html-css
    👉 Tham khảo khoá học nâng cao của mình: https://evondev.com/khoa-hoc-huong-dan-cat-psd
    👉 Kết nối với mình
    Fanpage: https://www.facebook.com/evondevblog/
    Facebook: https://www.facebook.com/tuan.trananh.0509
    Blog: https://evondev.com
    Nhóm của mình: https://www.facebook.com/groups/2565163230401512
    Học online với mình: https://www.facebook.com/messages/t/tuan.trananh.0509
    👉 Công cụ, tài nguyên
    – Theme: Dracula Official
    – Font chữ: SF Mono, 14px
    – Packages: Prettier, Material Icon, Highlight Matching Tag, Bracket Pair Colorizer, HTML Snippets, Live Server.
    – Extension: Eye Dropper color picker Chrome Extension, color slurp MacOS, visBug Chrome Extension
    – Tải Telegram cho máy tính tại đây: https://desktop.telegram.org/
    – Source code tại đây: https://t.me/evontube
Xem Thêm  Các câu lệnh có điều kiện trong Python: IF… Else, ELIF & Switch Case - câu lệnh điều kiện trong python

Bài 38: Bố cục website trong CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 4 ⭐ ( 2023 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bố cục rất quan trọng đối với một trang web. Cùng tìm hiểu cách sắp xếp, bố trí các phần như phần headers, menus, content và footer… rõ ràng và hợp lý hơn

Tách Div thành 2 cột bằng CSS

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9130 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Khi bạn thả nổi hai div đó, nội dung div sẽ giảm xuống chiều cao bằng…

Thuộc tính float điều chỉnh vị trí trong CSS

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 3382 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Căn lề trong CSS

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 5554 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Căn lề trong CSS | Margin trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Tailwind CSS là gì? Cách thiết kế web độc đáo với Tailwind CSS

  • Tác giả: hangnhatcaocap.com.vn
  • Đánh giá: 5 ⭐ ( 5408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Kết nối tên quốc gia hiện nay ở cột bên trái với tên quốc gia phong kiến ở cột bên phải cho phù hợp về các nước Đông Nam Á 1. Việt Nam 2. Lào 3. Campuchia 4. Thái Lan 5. Inđônêxia… a) Môgiôpahít, Sriv

  • Tác giả: lop.edu.vn
  • Đánh giá: 3 ⭐ ( 8282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: D. 1 – c, 2 – a, 3 – b, 4 – d, 5 – e

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình