Mengekalkan Reka Letak Lajur dengan Inline-Block
Apabila menggunakan paparan:inline-block untuk mencipta reka letak berbilang lajur, adalah perkara biasa untuk menghadapi masalah apabila penambahan kandungan pada satu lajur menjejaskan penjajaran yang lain, menyebabkan mereka jatuh ke bawah.
Penyelesaian:
Untuk menyelesaikan masalah ini, masukkan penjajaran menegak: atas; Pengisytiharan CSS untuk menjajarkan lajur secara menegak di bahagian atas. Ini memastikan semua lajur diselaraskan secara konsisten pada tahap menegak yang sama, tanpa mengira panjang kandungan.
.cont span { display: inline-block; vertical-align: top; /* Vertically align the inline-block elements */ height:100%; line-height: 100%; width: 33.33%; /* Just for Demo */ outline: 1px dashed red; /* Just for Demo */ }
Kaedah Penciptaan Lajur Alternatif:
Sementara blok sebaris boleh mudah, ia mempunyai had, seperti ruang putih antara lajur. Untuk mencapai susun atur lajur yang lebih mantap dan fleksibel, pertimbangkan untuk menggunakan display:flex atau display:grid. Kaedah ini menawarkan kawalan yang lebih besar ke atas reka letak dan penjajaran, memastikan persembahan yang konsisten walaupun dengan panjang kandungan yang berbeza-beza.
Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Konsisten Reka Letak Lajur dengan Inline-Block?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!