Bagaimana untuk Mencipta Susun Atur Dua Lajur Stabil dalam HTML/CSS?-tutorial css-php.cn

Bagaimana untuk Mencipta Susun Atur Dua Lajur Stabil dalam HTML/CSS?

Linda Hamilton

Lepaskan： 2024-11-20 18:41:17

asal

499 orang telah melayarinya

How to Create a Stable Two-Column Layout in HTML/CSS?

Membuat Reka Letak Dua Lajur yang Stabil dalam HTML/CSS

Apabila mereka bentuk halaman web, selalunya perlu untuk mencipta yang stabil, dua lajur susun atur. Walau bagaimanapun, mencapai reka letak ini boleh menjadi mencabar, terutamanya apabila mengubah saiz atau menggunakan sempadan. Artikel ini meneroka pendekatan untuk mencipta reka letak dua lajur yang stabil dalam HTML/CSS yang memenuhi keperluan berikut:

Kekangan Bekas:
- Lebar harus melaraskan kepada 100% elemen induknya.
- Tinggi melaraskan untuk mengandungi kedua-dua lajur.
- Saiz minimum bersamaan dua kali ganda lebar lajur kiri.
Kekangan Lajur (Umum):
- Ketinggian boleh ubah, melaraskan kepada kandungan.
- Penjajaran sebelah-menyebelah, dengan tepi atas dalam baris.
- Berdaya tahan pada jidar, pelapik atau jidar yang digunakan pada mana-mana lajur.
Lajur Kiri Kekangan:
- Lebar tetap dan mutlak dalam piksel.
Kekangan Lajur Kanan:
- Mengisi ruang yang tinggal di dalam bekas.
- Lebar sama dengan lebar bekas tolak lebar lajur kiri.
Kestabilan yang Diperlukan:
- Boleh diubah saiz kepada lebar minimum atau lebih besar tanpa susun atur gangguan.

Penyelesaian:

Untuk mencapai susun atur dua lajur yang stabil, kita boleh memanfaatkan sifat terapung. Begini caranya:

Tetapkan lajur kiri untuk terapung ke kiri:
```
left {
  width: 200px;
  float: left;
}
```
Salin selepas log masuk
Imbangi kanan lajur:
```
#right {
  margin-left: 200px;
}
```
Salin selepas log masuk
Kosongkan apungan selepas lajur menggunakan div:
```
<div class="clear"></div>
```
Salin selepas log masuk

Penyelesaian ini membolehkan kedua-dua lajur wujud bersama tanpa mengganggu satu sama lain. Lajur kiri mengekalkan lebar tetapnya, manakala lajur kanan mengisi ruang yang tinggal. Sebarang sempadan atau pelapik yang digunakan pada lajur tidak akan menjejaskan kedudukannya.

Contoh Langsung:

<!DOCTYPE html>
<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

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