css - レスポンシブに画面の中央に水平に表示される 4 つの同じサイズのボックスを作成する最も簡単なソリューションは何ですか?

Question

4 つの同じサイズのボックスをインライン (水平) に表示し、画面の中央に配置する最も簡単なソリューションは何ですか?

同じサイズの 4 つの div があり、インラインで表示され、常に中央に配置されます。つまり、画面の左と書き込みに常に等しい余白があります。そして、私はそれが反応することを望みます。flex-box は既に試しましたが、css3 とのブラウザの互換性に問題があります。

Answer 1

これが絶対的な「最善の」方法であるかどうかはわかりません。しかし、このようなものは間違いなく機能します。

div {
   width: 22%; //adjust as necessary
   margin-right: 4%; //adjust as necessary
   float: left;
   height: 5em; //adjust or remove as necessary 
}

div.last { //alternatively you could consider using the :last-child selector
   margin-right: 0;
   float: right;
}

"last" のクラスを last に適用する必要がありますdiv。div:last-childまたは、それらがすべて親要素に含まれている場合に使用できます。

また、マージン/幅を調整するときは、それらが相対的であることを確認してください。widthx4 + margin-rightx3 は常に = 100 にする必要があります (パディングやボーダーがない場合)。