Bagaimana untuk Memastikan Lajur Sejajar Apabila Menggunakan `display: inline-block`?

Mengekalkan Penjajaran Lajur Menggunakan Paparan: Inline-Block

Apabila menggunakan paparan: inline-block untuk susun atur berbilang lajur, adalah penting untuk dipertimbangkan isu lajur bergerak ke bawah apabila kandungan ditambahkan pada salah satu daripadanya. Gangguan dalam reka letak ini boleh diselesaikan dengan menggunakan sifat penjajaran menegak untuk menjajarkan lajur secara menegak di bahagian atas.

Dengan menggabungkan penjajaran menegak: atas; ke dalam pengisytiharan CSS, kami memastikan bahawa lajur menjajarkan diri mereka sendiri di bahagian atas, tanpa mengira kandungan yang ditambahkan pada setiap lajur. Ini menghalang reka letak yang lain daripada terjejas dan mengekalkan penjajaran mendatar yang diingini.

Sampel kod dipertingkat dengan sifat penjajaran menegak disertakan:

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

Perlu diperhatikan bahawa semasa paparan : blok sebaris boleh digunakan untuk susun atur lajur, terdapat pilihan yang lebih moden dan fleksibel tersedia, seperti flexbox atau grid CSS. Pendekatan ini mungkin menawarkan kawalan yang lebih besar dan penyelesaian yang lebih cekap untuk mencipta susunan berbilang lajur.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Lajur Sejajar Apabila Menggunakan `display: inline-block`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!