Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mencipta Lajur Ketinggian Sama Menggunakan Elemen Terapung dalam CSS?

Bagaimanakah Saya Boleh Mencipta Lajur Ketinggian Sama Menggunakan Elemen Terapung dalam CSS?

Linda Hamilton
Lepaskan: 2024-12-24 12:03:10
asal
223 orang telah melayarinya

How Can I Create Equal Height Columns Using Floated Elements in CSS?

Mencipta Lajur Sama Tinggi dengan Elemen Terapung

Dalam susun atur halaman yang menampilkan div induk yang mengandungi dua div anak, salah satu div kanak-kanak boleh mempunyai lebih banyak kandungan, menyebabkan div induk mengembang ketinggian. Walau bagaimanapun, div kanak-kanak yang lain mungkin tidak melaraskan ketinggiannya dengan sewajarnya. Isu ini boleh diselesaikan dengan menggunakan sifat CSS tertentu.

Untuk mencapai ketinggian yang sama bagi kedua-dua div kanak-kanak:

  1. Elemen Induk:

    • Tambah limpahan: tersembunyi untuk mengelakkan sebarang kandungan daripada tumpah di luar ibu bapa.
    • Tetapkan kedudukan: relatif untuk kedudukan mutlak anak berikut.
    • Gunakan lebar: 100% untuk memastikan ibu bapa merentangi keseluruhan lebar yang tersedia.
  2. .anak-kanan Elemen:

    • Tetapkan warna unik untuk analisis visual (cth., latar belakang: hijau).
    • Tetapkan ketinggian: 100% untuk memastikan ketinggian sepadan dengan induk.
    • Gunakan lebar: 50% untuk menetapkan lebar kepada separuh daripada lebar ibu bapa lebar.
    • Tambah kedudukan: mutlak untuk penentududukan mutlak dalam induk.
    • Tetapkan ke kanan: 0 untuk meletakkannya siram pada tepi kanan induk.
    • Set atas: 0 untuk meletakkannya siram pada tepi atas ibu bapa.

Dengan menggunakan sifat CSS ini, kedua-dua div kanak-kanak akan mempunyai ketinggian yang sama, memastikan reka letak yang seimbang dari segi visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Lajur Ketinggian Sama Menggunakan Elemen Terapung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan