ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS のみを使用して、最後の行が左揃えで中央揃えのグリッドを作成する方法

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-13 11:29:15552ブラウズ

How to Create a Centered Grid with a Left-Aligned Last Row Using Only 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。