ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSのみを使用して中央揃えのインラインブロックグリッドの最後の行を左揃えにする方法は?

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

Susan Sarandon
リリース: 2024-12-02 20:57:12
オリジナル
499 人が閲覧しました

How to Left-Align the Last Row of a Centered Inline-Block Grid Using Only CSS?

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

この質問は、インラインブロック要素のグリッドの最後の行を左に揃えながら、グリッド全体の中央揃え。ユーザーは、特に Flexbox や追加のマークアップを含まない CSS ソリューションを探しています。

要件を満たすアダプティブ グリッド ソリューションは次のとおりです。

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>
ログイン後にコピー

このソリューションでは、インラインブロック要素は固定幅のコンテナ内に配置されます。ブラウザ ウィンドウの幅が変化すると、コンテナは中央の位置を維持したままサイズ変更されます。コンテナーの幅が狭すぎてすべての要素を収容できない場合、要素は次の行に折り返され始めます。 inline-block 要素のデフォルトの動作により、最後の行は自動的に左揃えになります。

デモ リンク:

[アダプティブ グリッド デモ](ここにデモ リンクを挿入) )

ブラウザ ウィンドウのサイズを変更すると、グリッドがどのように適応し、最後の行が左揃えのままになるかを観察できます。すべてのシナリオ。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート