フレックスボックスを使用せずに中央揃えのインラインブロックグリッドの最後の行を左揃えにする方法は?

Display Inline-Block を使用して要素の中央グリッドの最後の行を左揃えにしました

目的は、ブロックの中央グリッドを作成することです。最後の行が左に揃えられるようにします。 Flexbox に頼ったり、余分なフィラー div を追加したりせずに、CSS のみのソリューションを次に示します。

Display Inline-Block を使用したアダプティブ グリッド

<pre class="brush:php;toolbar:false">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;

}

@メディア画面と(max-width: 430px) {

#container{
    width:200px;
}

}

@media screen および (min-width: 431px) および (max-width: 630px) {
#container{

    width:400px;
}

}
@media 画面と (min-width: 631px) および (max-width: 830px) {
#container{

    width:600px;
}

}
@media screen and (min-width: 831px) and (max-width: 1030px) {
#container{

    width:800px;
}

}

<pre class="brush:php;toolbar:false"><div>

これこのソリューションは、ブラウザのサイズに応じて幅を調整する柔軟なグリッドを作成します。また、表示される列の数に関係なく、最後の行が必ず左に揃えられます。

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