人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSのリストで幅いっぱいに等間隔で画像を配置

幅700pxに4枚の画像(165px)を均等に配置したいです。
imgに
padding:10px 5px 10px 5px;
で設定すると幅700pxぴったりにはならないですよね(左右5px分センタリングしてしまう)
これをどうにかして綺麗に左右を揃える事は出来ないでしょうか?

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答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;
}
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ