Bagaimana untuk Menyusun Semula Lajur Menegak ke Mendatar dalam HTML/CSS?

Reka Letak 3 Lajur dalam HTML/CSS

Masalah:

Anda mempunyai HTML susun atur dengan tiga lajur disusun secara menegak: kiri, tengah, kanan. Anda ingin menyusun semula lajur ini secara mendatar menggunakan CSS tanpa mengubah struktur HTML.

Penyelesaian:

Untuk mencapai susunan lajur mendatar, anda boleh menggunakan sifat CSS berikut:

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

Penjelasan:

• apung: kiri; menjajarkan lajur kiri ke tepi kiri bekasnya.
• apung: kanan; menjajarkan lajur kanan ke tepi kanan bekasnya.
• paparan: blok sebaris; meletakkan lajur tengah sejajar dengan lajur lain, menghapuskan ruang putih yang akan hadir jika ia adalah elemen peringkat blok.
• Sifat lebar menetapkan lebar setiap lajur kepada satu pertiga daripada lebar bekas .

Petua Tambahan:

• Untuk lebih fleksibiliti, anda boleh mencipta sistem grid dengan berbilang lajur dengan menetapkan kelas lajur-* (cth. , lajur-dua, lajur-tiga).
• Gunakan kelas lajur-offset-* untuk menggunakan offset pada lajur, membolehkan anda mengawal jarak antara lajur.
• Gunakan lajur-inset -* kelas untuk memasukkan lajur dalam bekas, memperibadikan reka letak selanjutnya.

Atas ialah kandungan terperinci Bagaimana untuk Menyusun Semula Lajur Menegak ke Mendatar dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!