រំលងទៅខ្លឹមសារ

បែងចែកពីរជួរ

ដាក់មាតិកាចម្បង និងផ្ទាំងព័ត៌មានជំនួយក្បែរគ្នា ហើយនៅអេក្រង់តូចត្រូវជង់ជាមួយជួរ។

ប្លង់

មើលជាមុនផ្ទាល់

ប្រភព

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

របៀបប្រើ

  • ជួរជំនួយដាក់ទទឹងថេរ ជួរចម្បងយកកន្លែងដែលនៅសល់ — ជួរចម្បងត្រូវតូចមុន
  • ជួរណាដែលត្រូវអានមុនពេលជង់ ត្រូវសរសេរមុនក្នុង HTML ដែរ
  • មិនត្រូវបង្ខំឲ្យមានពីរជួរនៅអេក្រង់តូច; ប្រហែល ៧៦០ ភិចសែល ប្ដូរមកមួយជួរ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

  • មិនត្រូវប្ដូរឆ្វេងស្ដាំដោយ order ក្នុង CSS — លំដាប់មើលឃើញ និងលំដាប់ Tab នឹងខុសគ្នា
  • ដាក់ min-width:0 លើជួរចម្បង បើមិនទេ តារាងធំឬប្លុកកូដនឹងធ្វើឲ្យប្លង់ខូច

បន្ទាប់