Bagaimana untuk Menyelesaikan Isu Penjajaran Menegak Apabila Menggunakan Paparan: Sekatan Sebaris untuk Lajur?

Paparkan Lajur Blok Sebaris: Menyelesaikan Isu Penjajaran Menegak

Apabila menggunakan paparan: blok sebaris untuk membina berbilang lajur, adalah penting untuk menangani isu penjajaran menegak yang mungkin berlaku apabila kandungan ditambahkan.

Punca utama terletak pada penjajaran menegak lalai bagi elemen sebaris. Untuk membetulkannya, gunakan penjajaran menegak: atas; kepada elemen blok sebaris:

.cont span {
    display: inline-block;
    vertical-align: top;     /* Aligns columns vertically at the top */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* For demonstration purposes only */
    outline: 1px dashed red; /* For demonstration purposes only */
}

Ini memastikan semua lajur mengekalkan penjajaran menegak mereka, tanpa mengira ketinggian kandungan dalam setiap lajur.

Sementara blok sebaris boleh digunakan untuk lajur penciptaan, sesetengah pembangun memilih kaedah alternatif seperti float, flexbox atau grid CSS kerana ruang putih yang wujud yang dikaitkan dengan inline-block.

Dengan memahami teknik penjajaran menegak dan mempertimbangkan pilihan susun atur alternatif, anda boleh membina berbilang dengan berkesan -struktur lajur menggunakan paparan: blok sebaris atau kaedah lain yang sesuai.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Isu Penjajaran Menegak Apabila Menggunakan Paparan: Sekatan Sebaris untuk Lajur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!