cssで画像を均等に配置する方法を教えてください。

質問

cssで画像を均等に配置する方法を教えてください。
下図のようなレイアウトをcssで作りたいのですが方法を教えてください。

・■は画像（一行あたりの個数は固定）。
・罫線はブラウザの表示エリア（divのボックスです）。
┏━━━━━━┓
┃■■■■■■┃
┃■■■■■■┃
┃■■■■■■┃
┃■■■■　　┃
┗━━━━━━┛
・ブラウザのサイズを変えても画像は均等に配置。
┏━━━━━━━━━━━┓
┃■　■　■　■　■　■┃
┃　　　　　　　　　　　┃
┃■　■　■　■　■　■┃
┃　　　　　　　　　　　┃
┃■　■　■　■　■　■┃
┃　　　　　　　　　　　┃
┃■　■　■　■　　　　┃
┗━━━━━━━━━━━┛
できればテーブルを使わずに実現したいのです。

どなたかよろしくお願いします。

回答No.2

fujillin · ベストアンサー

tableを使うかjavascriptを使ってしまえば簡単だけれど、cssはよくわからないので・・・

<ul class="box">
<li><img ～～></li>
　　　　・・・・
</ul>
みたいな構造にしておいてliをfloatさせて幅を%指定、imgはtext-align:centerとかにすれば横方向は制御できそうですが、縦方向はHTML自体の概念にあまりないので面倒そう。（あるいは<div><div><img>などの構造でも同様ですが）
おまけに、CSSの解釈がブラウザごとに異なるのでハックが必要と、余計に手間がかかりますね。

一応、目的が似たようなことを書いたサイトがあったので、参考になると思い下に。
　http://css-eblog.com/csstechnique/img-center.html

お礼

ご回答有り難うございます。

リンクを拝見しました。cssではハック等で何かと手間がかかりそうですね。。
納期もある事なので今回はtable+javascriptが現実的な気がします。

■■■■■■←tableでwidth100%で画像はセル内センター配置
□　　　　　←divのボックスのheightをjavascriptのonresizeで都度設定
■■■■■■←上記の繰り返し
□

こんな感じかなと思っています。

アドバイス有り難うございました。

回答No.4

kawacchi

No.3です。
「position:absolute;」をあんなに書き連ねなくてももっと整理できましたね。
確認不足ですみません；

お礼

いえいえとんでもないです。

何か気付きをもらえた気がします。

有り難うございました！

回答No.3

kawacchi

画像のサイズがすべて同じであればこんな感じでいかがでしょう？

CSS部分
div {width: 100%; margin: -(画像heightの半分)px 0 0 -(画像widthの半分)px;}
#div1 {position: absolute; top: 20%;}
#div2 {position: absolute; top: 40%;}
#div3 {position: absolute; top: 60%;}
#div4 {position: absolute; top: 80%;}
.img1 {position: absolute; left: 15%;}
.img2 {position: absolute; left: 29%;}
.img3 {position: absolute; left: 43%;}
.img4 {position: absolute; left: 57%;}
.img5 {position: absolute; left: 71%;}
.img6 {position: absolute; left: 85%;}

HTML部分
<div id="div1">
<img src="**.jpg" class="img1" />
<img src="**.jpg" class="img2" />
<img src="**.jpg" class="img3" />
<img src="**.jpg" class="img4" />
<img src="**.jpg" class="img5" />
<img src="**.jpg" class="img6" />
</div>

～略～

<div id="div4">
<img src="**.jpg" class="img1" />
<img src="**.jpg" class="img2" />
<img src="**.jpg" class="img3" />
<img src="**.jpg" class="img4" />
</div>

お礼

ご回答有り難うございます。

ソースまで書いて頂いて感激です！
できればcssで実現したいので、この方法でも試行錯誤してみます。
position:absoluteにはIE6にバグがある様ですがハックで対策できるみたいです。

本当に有り難うございました。

回答No.1

metametamu

floatを使えばいいと思います。
画像の入る余白が無ければ自然と折り返して下の段に来るので。
それとバグを回避するために、display:inline;を指定しましょう。

お礼

さっそくのお返事有り難うございます。

質問の仕方が悪かったようで大変失礼しました。
画像を回り込ませずに枚数を固定で行きたいのです。

一行あたりの画像は「6枚固定」。
行数は「4行固定」（4行目は画像が4枚で左揃え）。

ブラウザのサイズを変更しても「6枚4行の均等割付」。
例えばブラウザの高さだけ高くした場合、画像間の左右の隙間は同じで、天地の隙間が広がる。
同様にブラウザの横幅だけ広くした場合、画像間の左右の隙間のみが広がり均等割付となる。

宜しくお願いします。