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

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin:0;
padding:0;

Nach dem Login kopieren

}

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

}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

Nach dem Login kopieren