Bagaimana untuk Membuat Reka Letak Dua Lajur dengan Lajur Kanan Lebar Tetap?

Cara Membuat Reka Letak Dua Lajur dengan Lajur Kanan Lebar Tetap

Dalam reka bentuk web, selalunya perlu membuat reka letak dengan dua lajur, satu daripadanya mempunyai lebar tetap manakala satu lagi adalah bendalir. Walaupun merupakan keperluan biasa, mencari penyelesaian yang berfungsi secara konsisten boleh menjadi mencabar.

Dalam kes khusus ini, matlamatnya ialah untuk mencipta dua lajur di mana lajur kanan mengekalkan lebar tetap manakala lajur kiri mengembang atau mengecut berdasarkan pada ruang yang ada. Berikut ialah jawapan langkah demi langkah:

1. Alih Keluar Terapung dari Lajur Kiri: Mengalih keluar sifat apungan pada lajur kiri membolehkannya mengalir secara semula jadi.
2. Alih Lajur Kanan Sebelum Lajur Kiri: Dalam HTML, lajur kanan harus berada sebelum kiri satu.
3. Tetapkan Lebar dan Terapung pada Lajur Kanan: Tentukan lebar tetap untuk lajur kanan dan gunakan apungan padanya (cth., apungan: kanan).
4. Tambah Limpahan dan Ketinggian pada Bahagian Luar: Gunakan limpahan: tersembunyi dan ketinggian (boleh auto) pada div luar yang mengandungi kedua-dua lajur dalam.
5. Tambah Lebar Auto dan Limpahan ke Lajur Kiri: Tetapkan lebar lajur kiri kepada auto dan gunakan limpahan: tersembunyi. Ini memastikan kebebasannya daripada lajur kanan.

Contoh HTML:

<div class="container">
  <div class="right">
    Right Content (Fixed Width)
  </div>
  <div class="left">
    Left Content (Flexible Width)
  </div>
</div>

CSS:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

Penyelesaian ini mencipta reka letak dua lajur yang dikehendaki dengan lajur kanan lebar tetap sambil membenarkan lajur kiri melaraskan secara dinamik berdasarkan saiz tetingkap penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak Dua Lajur dengan Lajur Kanan Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!