Bagaimana untuk Mencipta Reka Letak 2 Lajur dengan Lajur Kanan Lebar Tetap dan Lajur Kiri Bendalir?

Reka Letak Div ​​2 Lajur: Lajur Kanan dengan Lebar Tetap, Cecair Kiri

Soalan:

Anda sedang mencari penyelesaian untuk membuat reka letak dua lajur dengan kanan lebar tetap lajur dan lajur kiri yang fleksibel. Walaupun meneroka pelbagai pendekatan yang dicadangkan, tiada satu pun yang memenuhi keperluan khusus anda.

Jawapan:

Untuk mencapai reka letak yang anda inginkan, pengubahsuaian berikut diperlukan:

1. Alih Keluar Terapung dari Lajur Kiri: Keluarkan harta apungan daripada lajur kiri. Lebarnya akan ditentukan secara automatik.
2. Tertib Lajur Terbalik dalam HTML: Dalam kod HTML anda, pastikan lajur kanan mendahului lajur kiri. Ini membolehkan lajur kanan lebar tetap menetapkan lebarnya sebelum lajur kiri bendalir dilaraskan.
3. Tambah Limpahan dan Ketinggian ke Div Luar: Gunakan limpahan: sifat tersembunyi dan ketinggian tertentu atau ketinggian automatik ke div luar. Ini memastikan ia merangkum kedua-dua div dalam.
4. Konfigurasikan CSS Lajur Kiri: Untuk lajur kiri, tambahkan lebar: auto dan limpahan: tersembunyi. Sifat ini memastikan lajur kiri bebas daripada lajur kanan lebar tetap.

Contoh HTML dan CSS:

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

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

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

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

Dengan melaksanakan ini pelarasan, anda boleh membuat reka letak dua lajur yang diingini dengan lajur kanan lebar tetap dan lajur kiri cecair.

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