반응형 그리드에서 컨테이너를 중앙에 배치하고 하위 요소를 왼쪽 정렬하는 방법은 무엇입니까?

컨테이너 가운데 정렬 및 하위 요소 왼쪽 정렬

문제

이미지를 반응형 그리드에 표시하고 가로로 가운데 정렬하고 정렬합니다. 각 행 사이에 고정된 거리를 유지하면서 각 행 내에 남아 있습니다. 크기를 변경하지 않고 행당 최대 수에 맞게 브라우저 창의 크기가 조정되므로 이미지가 자동으로 줄바꿈되어야 합니다.

해결책

CSS만으로 원하는 레이아웃을 얻는 것은 어려울 수 있습니다. 다음은 미디어 쿼리를 활용하여 뷰포트 크기에 따라 내부 div의 너비를 조정하는 접근 방식입니다.

코드

<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">&lt;div class=&quot;outer&quot;&gt;
    &lt;div class=&quot;inner&quot;&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;//dummyimage.com/100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;//dummyimage.com/100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;//dummyimage.com/100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;//dummyimage.com/100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;item&quot;&gt;&lt;img src=&quot;//dummyimage.com/100&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>

고려 사항

• 사용을 고려하세요. 다수의 항목을 위한 JavaScript.
• CSS 전처리기는 코드 재사용성을 향상할 수 있습니다.
• 필요에 따라 요구 사항에 맞게 미디어 쿼리 중단점을 조정합니다.

위 내용은 반응형 그리드에서 컨테이너를 중앙에 배치하고 하위 요소를 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!