Wie richtet man die letzte Zeile in einem zentrierten Inline-Block-Raster linksbündig aus?

Linksbündige letzte Zeile in einem zentrierten Raster von Elementen

Problem:

Ein Raster von Elementen soll angezeigt werden Inline-Block ist horizontal zentriert, aber die letzte Zeile ist nicht linksbündig. Stattdessen ist es wie die anderen Zeilen zentriert.

Lösung mit Anzeige-Inline-Block:

Dieses adaptive Raster ist einfacher zu implementieren und anpassen.

Beispiel:

<div>

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

Erklärung:

• Der Gittercontainer (# Container) wird mit margin: 0 auto zentriert.
• Die Blöcke sind so eingestellt, dass sie Folgendes anzeigen: Inline-Block und haben gleiche Breiten und Ränder.
• Die Breite des Containers wird durch Medienabfragen angepasst, um eine zentrierte Ausrichtung auf verschiedenen Bildschirmgrößen beizubehalten.

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