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

Membuat Reka Letak Dua Lajur dengan Lajur Kanan Lebar Tetap

Dalam mereka bentuk reka letak tapak web, adalah perkara biasa untuk memerlukan dua lajur , satu dengan lebar tetap dan satu lagi dengan lebar bendalir. Ini boleh dicapai melalui gabungan sifat CSS dan struktur HTML.

Untuk bermula, adalah penting untuk mengalih keluar sifat apungan dari lajur sebelah kiri. Tidak seperti lajur sebelah kanan, yang memerlukan apungan dan lebar yang ditentukan untuk menetapkan kedudukannya, lajur sebelah kiri harus kekal fleksibel dalam lebar.

Selain itu, dalam kod HTML, lajur sebelah kanan harus diletakkan sebelum lajur sebelah kiri.

Dengan menggunakan limpahan: sifat tersembunyi dan nilai ketinggian (sama ada auto atau ukuran tertentu) pada div bekas, persekitaran ruang akan menyertakan kedua-dua div dalam.

Akhir sekali, untuk memastikan kebebasan lajur sebelah kiri daripada lajur sebelah kanan lebar tetap, adalah perlu untuk menambah lebar: sifat auto dan limpahan: sifat tersembunyi. Gabungan ini membolehkan lajur sebelah kiri berkembang tanpa mengganggu lajur sebelah kanan.

Untuk menunjukkan reka letak ini, pertimbangkan kod HTML dan CSS berikut:

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; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

Susun atur ini dengan berkesan meletakkan lajur sebelah kanan dengan lebar tetap di sebelah kanan, manakala lajur sebelah kiri kekal fleksibel dan melaraskan pada ruang yang tersedia.

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