Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die letzte Zeile in einem zentrierten Inline-Block-Raster ohne Flexbox linksbündig ausrichten?

Wie kann ich die letzte Zeile in einem zentrierten Inline-Block-Raster ohne Flexbox linksbündig ausrichten?

DDD
DDDOriginal
2024-12-19 14:33:09606Durchsuche

How to Left-Align the Last Row in a Centered Inline-Block Grid without Flexbox?

Linksbündige letzte Zeile im zentrierten Elementraster mit Inline-Block anzeigen

Das Ziel besteht darin, ein zentriertes Blockraster zu erstellen Stellen Sie sicher, dass die letzte Reihe links ausgerichtet ist. Ohne auf Flexbox zurückzugreifen oder zusätzliche Füll-Divs hinzuzufügen, finden Sie hier eine reine CSS-Lösung:

Adaptives Raster mit Display Inline-Block


<pre class="brush:php;toolbar:false">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 und (max-width: 430px) {

#container{
    width:200px;
}

}

@media screen und (min-width: 431px) und (max-width: 630px) {
#container{

    width:400px;
}

}
@media screen und (min-width: 631px) und (max-width: 830px) {
#container{

    width:600px;
}

}
@media screen und (min-width: 831px) und (max-width: 1030px) {
#container{

    width:800px;
}

}

<pre class="brush:php;toolbar:false"><div>



Diese Lösung erstellt ein flexibles Raster, das seine Breite entsprechend anpasst an die Browsergröße. Es stellt außerdem sicher, dass die letzte Zeile links ausgerichtet ist, unabhängig davon, wie viele Spalten angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Zeile in einem zentrierten Inline-Block-Raster ohne Flexbox linksbündig ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css while using class this display
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Es wurde ein skurriler Theme-Schalter mit CSS und Emojis erstelltNächster Artikel:Es wurde ein skurriler Theme-Schalter mit CSS und Emojis erstellt

In Verbindung stehende Artikel

Mehr sehen