Bagaimana untuk Menjajarkan Baris Terakhir bagi Grid Blok Sebaris Berpusat Menggunakan CSS Sahaja?

Baris Terakhir Dijajarkan Kiri dalam Grid Elemen Berpusat

Soalan ini menangani cabaran untuk menjajarkan baris terakhir grid elemen blok sebaris ke kiri sambil mengekalkan penjajaran berpusat keseluruhan grid. Pengguna secara khusus mencari penyelesaian CSS yang tidak melibatkan Flexbox atau markup tambahan.

Berikut ialah penyelesaian grid adaptif yang memenuhi keperluan:

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div>

Dalam penyelesaian ini , elemen blok sebaris diletakkan di dalam bekas dengan lebar tetap. Apabila lebar tetingkap penyemak imbas berubah, bekas berubah saiz sambil mengekalkan kedudukan tengahnya. Apabila lebar bekas menjadi terlalu sempit untuk menampung semua elemen, mereka mula membalut ke baris seterusnya. Baris terakhir dijajar ke kiri secara automatik disebabkan oleh kelakuan lalai elemen blok sebaris.

Pautan Demo:

[Demo Grid Adaptif](Sisipkan Pautan Demo Di Sini )

Dengan mengubah saiz tetingkap penyemak imbas, anda boleh melihat cara grid menyesuaikan diri dan baris terakhir kekal dijajar kiri dalam semua senario.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Baris Terakhir bagi Grid Blok Sebaris Berpusat Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!