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

Baris Terakhir Dijajar Kiri dalam Grid Elemen Berpusat

Masalah:

Grid elemen yang ditetapkan untuk dipaparkan blok sebaris dipusatkan secara mendatar, tetapi baris terakhir tidak dijajar ke kiri. Sebaliknya, ia berpusat seperti baris yang lain.

Penyelesaian dengan paparan sebaris-blok:

Grid penyesuaian ini lebih mudah untuk dilaksanakan dan menyesuaikan diri.

Contoh:

<div>

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;
    }
}

Penjelasan:

• Bekas grid (# bekas) dipusatkan menggunakan margin: 0 auto.
• Blok ditetapkan untuk dipaparkan: blok sebaris dan mempunyai lebar dan jidar yang sama.
• Lebar bekas dilaraskan melalui pertanyaan media untuk mengekalkan penjajaran berpusat pada saiz skrin yang berbeza.

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