Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Susun Atur Dua Lajur yang Stabil dalam HTML/CSS Yang Menentang Pecah Merentas Pelayar?
Bagaimana untuk Mencipta Susun Atur Dua Lajur yang Stabil dalam HTML/CSS Yang Menentang Pecah Merentas Pelayar?
- DDDasal
- 2024-11-29 22:15:15446semak imbas
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>
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!