Wie kann ich die letzte Zeile eines zentrierten Inline-Block-Rasters nur mit CSS linksbündig ausrichten?

Linksbündige letzte Zeile im zentrierten Raster von Elementen

Diese Frage befasst sich mit der Herausforderung, die letzte Zeile eines Rasters von Inline-Block-Elementen linksbündig auszurichten und dabei beizubehalten die zentrierte Ausrichtung des gesamten Rasters. Der Benutzer sucht speziell nach einer CSS-Lösung, die weder Flexbox noch zusätzliches Markup beinhaltet.

Hier ist eine adaptive Grid-Lösung, die die Anforderungen erfüllt:

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>

In dieser Lösung , werden die Inline-Block-Elemente in einem Container mit fester Breite platziert. Wenn sich die Breite des Browserfensters ändert, ändert sich die Größe des Containers, wobei seine zentrierte Position beibehalten wird. Wenn die Breite des Containers zu schmal wird, um alle Elemente aufzunehmen, wird mit dem Umbruch in die nächste Zeile begonnen. Die letzte Zeile wird aufgrund des Standardverhaltens von Inline-Block-Elementen automatisch linksbündig ausgerichtet.

Demo-Link:

[Adaptive Grid Demo](Demo-Link hier einfügen )

Durch die Größenänderung des Browserfensters können Sie beobachten, wie sich das Raster anpasst und die letzte Zeile insgesamt linksbündig bleibt Szenarien.

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Zeile eines zentrierten Inline-Block-Rasters nur mit CSS linksbündig ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!