Bagaimana untuk Mencipta Susun Atur Dua Lajur yang Stabil dalam HTML/CSS Yang Menentang Pecah Merentas Pelayar?

Cara Mencapai Reka Letak Dua Lajur yang Stabil dalam HTML/CSS

Membuat reka letak dua lajur dalam HTML/CSS boleh mencabar, terutamanya apabila mencari kestabilan merentas pelbagai pelayar. Artikel ini menyediakan penyelesaian yang menangani keperluan khusus yang digariskan dalam pertanyaan awal.

Sifat Bekas

• Lebar: Menepati 100% elemen induk.
• Ketinggian: Melaraskan secara automatik kepada memuatkan kedua-dua lajur, menghapuskan limpahan atau bar skrol.
• Saiz Minimum: Sama dengan dua kali ganda lebar lajur kiri.

Spesifikasi Lajur

• Ketinggian: Pembolehubah, melaraskan kepada ketinggian kandungan.
• Susunan: Bersebelahan dengan tepi atas yang dijajarkan.
• Kestabilan: Tahan pecah reka letak apabila menggunakan sempadan , pelapik atau jidar pada lajur.

Lajur Kiri Spesifikasi

• Lebar: Tetap, nilai mutlak dalam unit piksel.

Spesifikasi Lajur Kanan

• Lebar: Mengisi ruang yang tinggal dalam bekas.
• Pengiraan Lebar: Lebar bekas tolak lebar lajur kiri. Apabila menetapkan lebar 100% kepada elemen DIV dalam lajur kanan, ia harus mengisi lajur dari tepi kanan lajur kiri ke tepi kanan bekas.

Keperluan Kestabilan

• Bekas diubah saiz dengan lancar tanpa gangguan reka letak, walaupun sekurang-kurangnya atau dikembangkan lebar.
• Lajur kiri mengekalkan lebar tetap, mengelakkan pengecutan.
• Lajur kanan tidak membalut di bawah lajur kiri.
• Tiada bar skrol atau limpahan lajur.
• Elemen dalam lajur kanan menggunakan sepenuhnya lebar.

Pertimbangan

• Elemen terapung digunakan untuk mengelakkan pembalut lajur.
• Limpahan: tersembunyi digunakan untuk memastikan pembendungan bekas.
• Sempadan pada lajur tidak boleh mengganggu reka letak.
• Kandungan dalam lajur tidak boleh menjejaskan kestabilan reka letak.

Penyelesaian HTML/CSS

  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
    }
    .clear {
      clear: both;
    }
  </style>



  <div><p>Penyelesaian ini memenuhi semua keperluan yang ditetapkan untuk reka letak dua lajur yang stabil dan boleh laras dalam HTML/CSS, memastikan konsisten dalam pelbagai pelayar.</p></div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Dua Lajur yang Stabil dalam HTML/CSS Yang Menentang Pecah Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!