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

Reka Letak Div ​​2 Lajur: Mencapai Lajur Kanan Lebar Tetap dan Lajur Kiri Cecair

Cabaran:

Mencipta susun atur dua lajur di mana lajur kanan mempunyai lebar tetap manakala lajur kiri melaraskan secara dinamik pada ruang yang tersedia.

Kod Disediakan:

Kod yang diberikan cuba melaksanakan reka letak menggunakan apungan dan jidar, tetapi menghadapi masalah.

Penyelesaian:

Untuk mewujudkan lajur kanan lebar tetap sambil mengekalkan kecairan dalam lajur kiri, ikut garis panduan ini:

1. Alih Keluar Terapung di Lajur Kiri: Alih keluar sifat apungan dari lajur kiri (#kandungan).
2. Susun Semula Lajur HTML: Letakkan lajur kanan (#kanan) sebelum lajur kiri dalam kod HTML. Ini memastikan bahawa lebar lajur kanan digunakan dahulu.
3. Gunakan Limpahan ke Div Luar: Tambahkan limpahan: tersembunyi dan ketinggian (mis., ketinggian: auto) pada div luar (div. bekas). Ini menghalang div dalam daripada melimpahi bekas.
4. Tetapkan Lebar dan Limpahan Lajur Kiri: Tetapkan lebar lajur kiri kepada auto dan tambah limpahan: tersembunyi. Ini membolehkan lajur mengisi ruang yang tinggal dan menghalang interaksi dengan lajur kanan.

Contoh Kod:

HTML:

<div class="container">
  <div class="right">
    Right content with fixed width
  </div>
  <div class="left">
    Left content with 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;
}

Demo:

Lawati [ini JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) untuk demonstrasi yang berfungsi.

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