Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menjajarkan Baris Terakhir ke Kiri dalam Grid Blok Sebaris Berpusat tanpa Flexbox?

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

DDD
DDDasal
2024-12-19 14:33:09658semak imbas

How to Left-Align the Last Row in a Centered Inline-Block Grid without 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

<div>

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>



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!

css while using class this display
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Membuat togol tema aneh, dengan CSS dan emojiArtikel seterusnya:Membuat togol tema aneh, dengan CSS dan emoji

Artikel berkaitan

Lihat lagi