Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Susun Atur Dua Lajur Stabil dalam HTML/CSS?
Bagaimana untuk Mencipta Susun Atur Dua Lajur Stabil dalam HTML/CSS?
- Linda Hamiltonasal
- 2024-11-20 18:41:17518semak imbas
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; } -
Imbangi kanan lajur:
#right { margin-left: 200px; } -
Kosongkan apungan selepas lajur menggunakan div:
<div class="clear"></div>
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>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!