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

Mary-Kate Olsen
Lepaskan: 2024-11-05 18:53:02
asal
878 orang telah melayarinya

How to Maintain Column Layout Consistency with 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 */
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!