Wie zentriert man einen Container und richtet untergeordnete Elemente linksbündig in einem responsiven Raster aus?

Container zentriert ausrichten und untergeordnete Elemente links ausrichten

Problem

Sie möchten Bilder in einem responsiven Raster anzeigen, sie horizontal zentrieren und ausrichten Sie werden innerhalb jeder Reihe belassen, wobei ein fester Abstand zwischen ihnen eingehalten wird. Die Bilder sollten automatisch umgebrochen werden, wenn sich die Größe des Browserfensters an die maximale Anzahl pro Zeile ändert, ohne dass sich ihre Größe ändert.

Lösung

Das gewünschte Layout allein mit CSS zu erreichen, kann eine Herausforderung sein. Hier ist ein Ansatz, der Medienabfragen nutzt, um die Breite der inneren Divs basierend auf den Abmessungen des Ansichtsfensters anzupassen:

Code

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fox inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>

<code class="html"><div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div></code>

Überlegungen

• Erwägen Sie die Verwendung JavaScript für eine große Anzahl von Elementen.
• CSS-Präprozessoren können die Wiederverwendbarkeit von Code verbessern.
• Passen Sie Medienabfrage-Haltepunkte nach Bedarf an Ihre Anforderungen an.

Das obige ist der detaillierte Inhalt vonWie zentriert man einen Container und richtet untergeordnete Elemente linksbündig in einem responsiven Raster aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!