中央揃えのインラインブロックグリッドの最後の行を左揃えにする方法は?

要素の中央グリッドの左揃えの最後の行

問題:

表示するように設定された要素のグリッド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 中国語 Web サイトの他の関連記事を参照してください。