目次一覧
状態:-
閲覧数:1,098
投稿日:2022-09-14
更新日:2022-09-14
要件 ／ 結論コード ／ 考え方
要件 ／ 結論コード ／ 考え方
要件
縦 2 列に並べたい。
marginを均等に設定したい。
結論コード
@media (max-width: 1500px) {
.box {
margin:0 0 0 1em;
width: calc((100% - 3em) / 2);
}
}考え方
1.最初に「margin」を決定します。
今回は、1emと設定しました。
2.次に今回必要な「margin」の数を決定します。
今回は縦 2 列なので、計 3 つのmargin( 3 × 1 em)が必要になります。
3.次に縦 2 列それぞれの「width」を決定します。
全体(100%)から、計 3 つのmargin( 3 × 1 em)を引いた数値が、縦 2 列のwidthになります。
縦 1 列のwidthを求めたいので、2 で割ります。
width: calc((100% - 3em) / 2);