Bagaimana untuk Menjajarkan Baris Terakhir ke Kiri dalam Grid Blok Sebaris Berpusat tanpa Flexbox?

Baris Terakhir dijajar ke kiri dalam Grid Berpusat Elemen menggunakan Paparan Sebaris-Blok

Objektifnya adalah untuk mencipta grid berpusat blok sambil memastikan baris terakhir sejajar ke kiri. Tanpa menggunakan Flexbox atau menambah div pengisi tambahan, berikut ialah penyelesaian CSS sahaja:

Grid Adaptif menggunakan Display Inline-Block

margin:0;
padding:0;

}

bekas{

font-size:0;
margin:0 auto;
width:1000px;

}
.sekat {

font-size:20px;
width: 150px;
height: 150px;
margin:25px;
background: gold;
display:inline-block;

}

skrin@media dan (lebar maksimum: 430px) {

#container{
    width:200px;
}

}

skrin@media dan (lebar min: 431px) dan (lebar maksimum: 630px) {
#bekas{

    width:400px;
}

}
skrin @media dan (lebar min: 631px) dan (lebar maksimum: 830px) {
#bekas{

    width:600px;
}

}
@skrin media dan (lebar min: 831px) dan (lebar maksimum: 1030px) {
#bekas{

    width:800px;
}

}

<div><p></p></div>

Penyelesaian ini mencipta grid fleksibel yang menyesuaikan lebarnya mengikut saiz pelayar. Ia juga memastikan baris terakhir dijajar ke kiri, tidak kira berapa banyak lajur yang dipaparkan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Baris Terakhir ke Kiri dalam Grid Blok Sebaris Berpusat tanpa Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!