Bagaimana untuk Mencipta Susun Atur Dua Lajur yang Stabil dalam HTML/CSS Yang Menentang Pecah Merentas Pelayar?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-11-29 22:15:15

asal

547 orang telah melayarinya

How to Create a Stable Two-Column Layout in HTML/CSS That Resists Breakage Across Browsers?

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

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

<body>
  <div>

Salin selepas log masuk

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.

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!