CSS のみを使用して、最後の行が左揃えで中央揃えのグリッドを作成する方法

フレックスボックスを使用しない左揃えの最終行を持つ中央揃えのグリッド

インラインブロック表示を備えた CSS

最小限のマークアップと、よりシンプルなアダプティブ グリッド デザインを検討してください。 CSS。実装とカスタマイズに多用途に使用できます。

列がブラウザの幅に基づいて動的に変化する中央グリッドの最後の行を左揃えにすると、CSS は Flexbox を使用せずにこの効果を実現できます。

コードは次のとおりです:

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

<div>

このソリューションは、中央揃えを維持し、最後の行を左揃えにしながら、使用可能なブラウザの幅に基づいて列と行の数を自動的に調整します。 IE9 と互換性があり、運用環境での実装に適しています。

以上がCSS のみを使用して、最後の行が左揃えで中央揃えのグリッドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。