Bagaimana untuk Mencipta Grid Berpusat dengan Baris Terakhir Dijajar Kiri Hanya Menggunakan CSS?

Grid Berpusat dengan Baris Terakhir Jajaran Kiri Tanpa Kotak Flex

CSS dengan Paparan Blok Sebaris

Pertimbangkan reka bentuk grid penyesuaian yang lebih ringkas dengan penanda minimum dan CSS, menjadikannya serba boleh untuk pelaksanaan dan penyesuaian.

Untuk yang terakhir dijajar kiri baris dalam grid berpusat di mana lajur berbeza secara dinamik berdasarkan lebar penyemak imbas, CSS boleh mencapai kesan ini tanpa menggunakan Flexbox.

Ini kodnya:

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>

Penyelesaian ini melaraskan secara automatik bilangan lajur dan baris berdasarkan lebar penyemak imbas yang tersedia sambil mengekalkan penjajaran tengah dan penjajaran kiri baris terakhir. Ia serasi IE9 dan sesuai untuk pelaksanaan dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Grid Berpusat dengan Baris Terakhir Dijajar Kiri Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!