Thực nghiệm tạo trang Full Screen trình bày 2 cột

Để trình bày 1 trang 2 cột dọc hiển thị toàn màn hình ta đã có bài hướng dẫn cách làm chi tiết từng bước trong Blog, và qua đó thực hiện dễ dàng, không gì khó khăn! Bài viết này là thực tế sản phẩm đã làm theo hướng dẫn trên để người làm dễ hình dung!

Nội dung chính

GỢI Ý: Có thể dùng Layout này để hiển thị 1 trang song ngữ Anh-Việt nhằm học Tiếng Anh!
Ta có thể ứng dụng linh hoạt cách này lúc cần trình bày trang dưới dạng 2 cột.
Giòng code này cụ thể như sau:

<div class="two-column-layout">
  <div class="left-column">
    <h3>Cột trái</h3>
    <p>Nội dung của cột trái. Bạn có thể viết Markdown hoặc HTML trong đây.</p>
    <ul>
      <li>Mục 1</li>
      <li>Mục 2</li>
    </ul>
  </div>

  <div class="right-column">
    <h3>Cột phải</h3>
    <p>Nội dung của cột phải. Tương tự, bạn có thể thêm bất kỳ nội dung Markdown hoặc HTML nào.</p>
    <blockquote>
      Đây là một ví dụ quote.
    </blockquote>
  </div>
</div>