Bagaimana untuk Menjajarkan Lajur Blok Sebaris Secara Menegak untuk Reka Letak Konsisten?

Penjajaran Menegak Lajur Blok Sebaris

Apabila menggunakan blok sebaris untuk mencipta lajur, adalah penting untuk menangani cabaran lajur beralih ke bawah dengan kandungan tambahan dalam lajur pertama. Untuk menyelesaikan isu ini, kami perlu memastikan penjajaran menegak yang betul.

Penyelesaian terletak pada menambahkan pengisytiharan CSS untuk menjajarkan lajur secara menegak di bahagian atas:

.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 */
}

Ini memastikan bahawa walaupun dengan pelbagai kandungan dalam lajur pertama, lajur lain kekal sejajar di bahagian atas.

Walaupun blok sebaris mempunyai kelemahannya, ia masih merupakan pilihan yang berkesan untuk membuat lajur mudah. Walau bagaimanapun, pertimbangkan untuk menggunakan flexbox atau grid CSS untuk reka letak lajur yang lebih maju.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Lajur Blok Sebaris Secara Menegak untuk Reka Letak Konsisten?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!