Bagaimana untuk Mengekalkan Konsisten Reka Letak Lajur dengan Inline-Block?

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!