Wie erstelle ich ein zentriertes Raster mit einer linksbündigen letzten Zeile nur mit CSS?

Zentriertes Raster mit linksbündiger letzter Zeile ohne Flexbox

CSS mit Inline-Block-Anzeige

Erwägen Sie ein einfacheres adaptives Rasterdesign mit minimalem Markup und CSS, wodurch es vielseitig für die Implementierung und Anpassung geeignet ist.

Für eine linksbündige letzte Zeile in einem zentrierten Raster, in dem die Spalten variieren Dynamisch basierend auf der Browserbreite kann CSS diesen Effekt erzielen, ohne Flexbox zu verwenden.

Hier ist der Code:

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>

Diese Lösung passt die Anzahl der Spalten und Zeilen automatisch basierend auf an Die verfügbare Browserbreite wird beibehalten, wobei die zentrierte Ausrichtung beibehalten und die letzte Zeile linksbündig ausgerichtet wird. Es ist IE9-kompatibel und für die Implementierung in Produktionsumgebungen geeignet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein zentriertes Raster mit einer linksbündigen letzten Zeile nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!