幅700pxに4枚の画像(165px)を均等に配置したいです。
imgに
padding:10px 5px 10px 5px;
で設定すると幅700pxぴったりにはならないですよね(左右5px分センタリングしてしまう)
これをどうにかして綺麗に左右を揃える事は出来ないでしょうか?
No.1
700 - ( 165 × 4 ) = 40 なので、余白として利用できる分が合計40px
外枠 余白1 画像1 余白2 画像2 余白3 画像3 余白4 画像4 余白5 外枠
画像を4枚で余白が5箇所なので、40 ÷ 5 = 8
余白1箇所に8px分割り当てると丁度良くなります。
外枠となる要素の内側余白を0pxでリセットしておき、外側余白を画像の左側だけに8px指定、最後の画像だけ両側に8pxずつとなるように指定すると良さそうです。
/* 対象のimgにclass="test-img" を指定している場合 */
.test-img {
margin-left: 8px;
}
.test-img:nth-child(4) {
margin-right: 8px;
}
1
1
コメント（0件)