Bagaimana untuk Menjajarkan Pusat Bekas dan Elemen Kanak-Kanak Jajaran Kiri dengan Lajur Responsif?

Center Align Container and Left Align Child Elements

Soalan anda bertujuan untuk memaparkan nombor dinamik imej pada halaman web yang berpusat dan dijajarkan dalam satu baris tanpa mengubah saiz. Elemen kanak-kanak harus dikumpulkan bersama dan dijarakkan.

Untuk mencapai matlamat ini, anda boleh memanfaatkan pertanyaan media dalam CSS. Kod yang disediakan menunjukkan cara:

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>

Kod ini termasuk pertanyaan media khusus untuk saiz skrin yang berbeza untuk memastikan lebar div dalam dilaraskan secara dinamik. Ambil perhatian bahawa anda mungkin perlu melaraskan saiz longkang (margin) berdasarkan keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Pusat Bekas dan Elemen Kanak-Kanak Jajaran Kiri dengan Lajur Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!