匿名質問者

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


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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:
  • 終了:2013/11/28 17:30:03

回答1件)

匿名回答1号 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;
}

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません