Wie richtet man Container zentriert und untergeordnete Elemente linksbündig mit responsiven Spalten aus?

Container zentriert ausrichten und untergeordnete Elemente links ausrichten

Ihre Frage zielt darauf ab, eine dynamische Anzahl von Bildern auf einer Webseite anzuzeigen, die zentriert und ausgerichtet sind ohne Größenänderung in einer Reihe ausgerichtet werden. Die untergeordneten Elemente sollten gruppiert und voneinander beabstandet sein.

Um dies zu erreichen, können Sie Medienabfragen in CSS nutzen. Der bereitgestellte Code zeigt, wie:

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for 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>

Dieser Code enthält spezifische Medienabfragen für verschiedene Bildschirmgrößen, um sicherzustellen, dass die Breite des inneren Divs dynamisch angepasst wird. Beachten Sie, dass Sie möglicherweise die Größe des Bundstegs (Rand) entsprechend Ihren Anforderungen anpassen müssen.

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