Bagaimana untuk Menjajarkan Lajur Sekat Sebaris Secara Menegak?

Penjajaran Menegak Lajur Blok Sebaris

Apabila menggunakan display:inline-block untuk membuat lajur, ia menjadi jelas bahawa apabila kandungan ditambah ke lajur pertama, lajur berikutnya menurun secara menegak. Ini boleh diselesaikan dengan menggunakan sifat CSS jajaran menegak.

Untuk mengelakkan isu ini, tambah jajaran menegak: atas; kepada pengisytiharan CSS bekas. Ini memastikan semua lajur dijajarkan secara menegak di bahagian atas, tanpa mengira kandungan dalam setiap lajur.

.cont span {
    display: inline-block;
    vertical-align: top;
    height:100%;
    line-height: 100%;
    width: 33.33%;
    outline: 1px dashed red; /* Just for Demo */
}

Pendekatan Alternatif

Walaupun blok sebaris boleh digunakan untuk buat lajur, ini mungkin bukan penyelesaian yang optimum kerana kemungkinan isu ruang putih antara lajur. Pertimbangkan untuk menggunakan kotak flex atau grid CSS, kerana ia memberikan lebih kawalan ke atas reka letak dan penjajaran lajur.

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