중앙 인라인 블록 그리드에서 마지막 행을 왼쪽 정렬하는 방법은 무엇입니까?

중앙 요소 그리드의 왼쪽 정렬 마지막 행

문제:

표시하도록 설정된 요소 그리드 inline-block은 수평 중앙에 있지만 마지막 행은 왼쪽 정렬되지 않습니다. 대신 다른 행처럼 중앙에 배치됩니다.

디스플레이 인라인 블록을 사용하는 솔루션:

이 적응형 그리드는 구현하기가 더 간단하고 adapt.

예:

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

설명:

• 그리드 컨테이너(# 컨테이너)은 margin: 0을 사용하여 중앙에 배치됩니다. auto.
• 블록은 표시되도록 설정됩니다: 인라인 블록이며 너비와 여백이 동일합니다.
• 컨테이너의 너비는 다양한 화면 크기에서 중앙 정렬을 유지하기 위해 미디어 쿼리를 통해 조정됩니다.

위 내용은 중앙 인라인 블록 그리드에서 마지막 행을 왼쪽 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!