Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur ketinggian sama berbilang lajur

Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur ketinggian sama berbilang lajur

Dalam pembangunan web, melaksanakan susun atur ketinggian sama tinggi berbilang lajur adalah keperluan biasa. Kaedah tradisional ialah menggunakan JavaScript untuk melaksanakannya, tetapi kaedah ini mempunyai isu keserasian dan prestasi. Kini kita boleh mencapai susun atur ketinggian sama berbilang lajur dengan menggunakan susun atur Kedudukan CSS, yang bukan sahaja mudah digunakan, tetapi juga berkesan.

Kunci untuk mencapai susun atur ketinggian sama berbilang lajur adalah dengan menetapkan ketinggian lajur kandungan agar sama dengan ketinggian lajur tertinggi. Di bawah ini kami memperkenalkan tiga kaedah susun atur Kedudukan CSS biasa.

1. Gunakan susun atur fleksibel
   .bekas fleksibel {
   paparan: flex;
   }

.item fleksibel {
flex: 1;
}

Menggunakan reka letak lentur berbilang lajur ialah cara paling mudah untuk mencapai ketinggian sama rata susun atur . Kami menetapkan atribut paparan elemen induk kepada flex dan atribut flex elemen anak kepada 1, supaya elemen anak akan mengagihkan lebar elemen induk secara sama rata dan ketinggian akan kekal konsisten secara automatik.

2. Gunakan reka letak grid
   .grid-container {
   paparan: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   }

.grid-item grid {
-lajur-mula: span 1;
}

Menggunakan reka letak grid juga boleh mencapai susun atur ketinggian yang sama berbilang lajur. Kami menetapkan atribut paparan elemen induk kepada grid, dan kemudian menggunakan atribut grid-template-columns untuk mentakrifkan lebar elemen anak. Gunakan repeat(auto-fit, minmax(...)) untuk menyesuaikan secara automatik kepada lebar elemen induk, dan tetapkan atribut grid-column-start elemen anak untuk menentukan kedudukan permulaan setiap lajur.

3. Gunakan kedudukan dan susun atur terapung
   .kolum-bekas {
   limpahan: tersembunyi;
   }

.lajur-item {
apungan: kiri;
lebar: 33.33%;
dan susun atur apungan juga

}

Susun atur ketinggian sama berbilang lajur boleh dicapai. Kami menetapkan atribut limpahan kepada tersembunyi untuk elemen induk supaya apungan boleh dikosongkan. Kemudian tetapkan atribut apungan untuk elemen anak dan nisbah lebar elemen induk, supaya elemen anak akan terapung secara automatik dalam satu baris, dan ketinggian akan kekal konsisten secara automatik.

Perlu diingatkan bahawa kaedah di atas semua perlu menetapkan ketinggian elemen induk, dan kandungan elemen anak tidak boleh melebihi ketinggian elemen induk, jika tidak, kesan susun atur ketinggian yang sama akan musnah.

Ringkasnya, adalah sangat mudah untuk menggunakan susun atur Kedudukan CSS untuk mencapai susun atur ketinggian yang sama berbilang lajur. Kita boleh memilih untuk menggunakan susun atur fleksibel, susun atur grid atau susun atur kedudukan dan apungan untuk melaksanakannya, dan memilih kaedah yang sesuai mengikut keperluan dan keutamaan kita.

Saya harap artikel ini akan membantu anda memahami dan menggunakan reka letak Kedudukan CSS untuk mencapai susun atur ketinggian yang sama berbilang lajur!

Atas ialah kandungan terperinci Kaedah susun atur Kedudukan CSS untuk melaksanakan susun atur ketinggian sama berbilang lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!