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

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><p></p></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!