Bagaimana untuk Mencipta Reka Letak HTML/CSS Dua Lajur yang Stabil dengan Pelarasan Ketinggian Dinamik?

Memperbaiki Reka Letak HTML/CSS Dua Lajur yang Stabil

Pengenalan:

Mereka bentuk susun atur dua lajur yang stabil dalam HTML/CSS memerlukan pertimbangan yang teliti terhadap beberapa faktor, termasuk lajur dimensi, pelarasan ketinggian dan daya tahan reka letak terhadap perubahan dan variasi kandungan.

Keperluan Khusus:

Reka letak hendaklah memenuhi keperluan berikut:

• Lebar dan ketinggian bekas melaraskan secara automatik.
• Ketinggian bekas sepadan dengan yang lebih besar ketinggian dua lajur.
• Saiz bekas minimum ialah dua kali ganda lebar lajur kiri.
• Lajur dijajarkan secara menegak dan mempunyai ketinggian berubah-ubah.
• Dimensi dan reka letak lajur kekal stabil walaupun dengan jidar, padding atau pelarasan jidar.
• Lajur kiri mempunyai piksel tetap lebar.
• Lebar lajur kanan memenuhi ruang bekas yang tinggal, membolehkan elemen blok lebar 100% meluas merentasi keseluruhannya.

Penyelesaian:

HTML Struktur:

<div>

Penggayaan CSS:

#left {
  width: 200px;
  float: left;
}
#right {
  margin-left: 200px;
}
.clear {
  clear: both;
}

Pendekatan ini menggunakan pelampung CSS untuk meletakkan lajur sebelah-menyebelah dan penggodaman clearfix (.clear) untuk mengelakkan tiang terapung daripada runtuh ketinggian bekas. Jidar-kiri pada lajur kanan memastikan ia menempati ruang yang tinggal dalam bekas.

Kelebihan:

• Mengekalkan reka letak dan dimensi lajur yang stabil.
• Ketinggian bekas dilaraskan secara dinamik berdasarkan lajur ketinggian.
• Mengendalikan perubahan kandungan dan reka letak berubah-ubah dengan anggun.
• Serasi dengan penyemak imbas utama, termasuk IE8, Firefox 4 dan Safari 5.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Reka Letak HTML/CSS Dua Lajur yang Stabil dengan Pelarasan Ketinggian Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!