Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Chia hai cột

Đặt nội dung chính và phần thông tin phụ cạnh nhau, rồi xếp thành một cột khi màn hình hẹp lại.

Bố cục

Xem trước trực tiếp

Nguồn

<div class="dc-split">
  <main class="dc-split__main">
    <h2 class="dc-split__title">용접 보조 — 경기 화성</h2>
    <p class="dc-split__text">주 5일, 오전 8시부터 오후 5시까지 일합니다. 기숙사와 점심이 나오고, 출입국 서류는 회사가 함께 준비합니다.</p>
    <p class="dc-split__text">경력이 없어도 2주 교육을 받고 시작합니다. 교육 기간에도 일당이 나옵니다.</p>
  </main>
  <aside class="dc-split__side" aria-label="지원 요약">
    <div class="dc-split__card">
      <p class="dc-split__row"><span class="dc-split__k">월급</span><span class="dc-split__v">280만원</span></p>
      <p class="dc-split__row"><span class="dc-split__k">비자</span><span class="dc-split__v">E-9</span></p>
      <p class="dc-split__row"><span class="dc-split__k">마감</span><span class="dc-split__v">10월 2일</span></p>
      <button type="button" class="dc-split__btn">지원하기</button>
    </div>
  </aside>
</div>
.dc-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--dc-6); align-items:start; font-family:var(--dc-font); }
.dc-split--left { grid-template-columns:300px minmax(0,1fr); }
.dc-split--even { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dc-split__main { min-width:0; }
.dc-split__side { min-width:0; }
.dc-split__title { margin:0 0 var(--dc-3); font-size:20px; font-weight:700; line-height:1.35; color:var(--dc-text); }
.dc-split__text { margin:0 0 var(--dc-3); font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-split__card { padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-split__row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--dc-3); margin:0 0 var(--dc-2); font-size:14px; }
.dc-split__k { color:var(--dc-text-mute); }
.dc-split__v { font-weight:700; color:var(--dc-text); }
.dc-split__btn { width:100%; min-height:44px; margin-top:var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:600; transition:background var(--dc-fast); }
.dc-split__btn:hover { background:var(--dc-brand-hi); }
@media (max-width:760px) {
  .dc-split, .dc-split--left, .dc-split--even { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
}

Cách dùng

  • Cột phụ để bề rộng cố định, cột chính lấy phần còn lại — cột chính phải co trước
  • Cột nào cần đọc trước khi xếp dọc thì viết trước trong HTML
  • Đừng cố giữ hai cột trên màn hình hẹp; khoảng 760px thì gộp về một cột

Điểm cần lưu ý

  • Không đổi chỗ hai cột bằng order trong CSS — thứ tự nhìn thấy và thứ tự phím Tab sẽ lệch nhau
  • Đặt min-width:0 cho cột chính, không thì bảng dài hay khối mã sẽ phá vỡ bố cục

Tiếp theo