cssで画像を均等に配置する方法を教えてください。
下図のようなレイアウトをcssで作りたいのですが方法を教えてください。
・■は画像(一行あたりの個数は固定)。
・罫線はブラウザの表示エリア(divのボックスです)。
┏━━━━━━┓
┃■■■■■■┃
┃■■■■■■┃
┃■■■■■■┃
┃■■■■ ┃
┗━━━━━━┛
・ブラウザのサイズを変えても画像は均等に配置。
┏━━━━━━━━━━━┓
┃■ ■ ■ ■ ■ ■┃
┃ ┃
┃■ ■ ■ ■ ■ ■┃
┃ ┃
┃■ ■ ■ ■ ■ ■┃
┃ ┃
┃■ ■ ■ ■ ┃
┗━━━━━━━━━━━┛
できればテーブルを使わずに実現したいのです。
どなたかよろしくお願いします。
No.2ベストアンサー
- 回答日時:
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
- 回答日時:
No.3です。
「position:absolute;」をあんなに書き連ねなくてももっと整理できましたね。
確認不足ですみません;
No.3
- 回答日時:
画像のサイズがすべて同じであればこんな感じでいかがでしょう?
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
- 回答日時:
floatを使えばいいと思います。
画像の入る余白が無ければ自然と折り返して下の段に来るので。
それとバグを回避するために、display:inline;を指定しましょう。
さっそくのお返事有り難うございます。
質問の仕方が悪かったようで大変失礼しました。
画像を回り込ませずに枚数を固定で行きたいのです。
一行あたりの画像は「6枚固定」。
行数は「4行固定」(4行目は画像が4枚で左揃え)。
ブラウザのサイズを変更しても「6枚4行の均等割付」。
例えばブラウザの高さだけ高くした場合、画像間の左右の隙間は同じで、天地の隙間が広がる。
同様にブラウザの横幅だけ広くした場合、画像間の左右の隙間のみが広がり均等割付となる。
宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
HTMLのIMAGEに。。
-
html+CSSのみで作るスライドショー
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
jqueryの画像切り替え
-
画像をクリックして同じページ...
-
ポップアップウィンドウのサイ...
-
画像をラジオボタンとして使用...
-
favicon.ico はもういらない?
-
inputタグでサーバにデータを送...
-
cssで画像を均等に配置する方法...
-
ulの画像をcssのfloatで横並び...
-
CSS側で、リンク画像を小するに...
-
画像をリンクさせると紫の枠が...
-
画像の横にテキスト
-
auの携帯サイトで画像と画像の...
-
ボタンをセル内一杯に表示させ...
-
CGI(更新記録)で写真の上にロゴ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
UDP通信を使うチャットプログラ...
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
CSSの左横に隙間ができてしまい...
-
table で画像をピッタリとくっ...
-
HTMLのIMAGEに。。
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
-
ホームページで画像を横に並べ...
-
リンクをつけた画像をクリック...
-
サムネイルをマウスオーバーす...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
おすすめ情報