Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-Kanak Jajar Kiri dalam Grid Responsif?

Bekas Jajar Tengah dan Elemen Kanak Jajaran Kiri

Isu

Anda ingin memaparkan imej dalam grid responsif, memusatkannya secara mendatar dan menjajarkan mereka ditinggalkan dalam setiap baris, sambil mengekalkan jarak tetap antara mereka. Imej harus dibalut secara automatik apabila tetingkap penyemak imbas diubah saiznya untuk memuatkan bilangan maksimum setiap baris tanpa mengubah saiznya.

Penyelesaian

Mencapai reka letak yang diingini semata-mata dengan CSS boleh menjadi mencabar. Berikut ialah pendekatan yang memanfaatkan pertanyaan media untuk melaraskan lebar div dalam berdasarkan dimensi viewport:

Kod

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fox 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>

<code class="html"><div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div></code>

Pertimbangan

• Pertimbangkan untuk menggunakan JavaScript untuk sejumlah besar item.
• prapemproses CSS boleh meningkatkan kod kebolehgunaan semula.
• Laraskan titik putus pertanyaan media mengikut keperluan untuk memenuhi keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Kontena dan Elemen Kanak-Kanak Jajar Kiri dalam Grid Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!