- 締切済み
４枚の画像を均等間隔で一列に並べる
４枚の画像を一列に並べようと思います。 ４枚に与えられたスペースは550pxです。画像の下のコンテンツも550pxを基準に配置するので、４枚のうちの両側の２枚は550pxの両端に配置しようと思います。 この趣旨でコーディングしたのが下記URLです。 http://makoji.web.fc2.com/test/test_18/test.html 他の画像を margin-right: 14px; とすると綺麗に並びました。ただ確認をとったのは最近のブラウザだけで、古いブラウザでどうなっているのか分かりません。過去の例でうまく並んだと思ったらIE6.0で４枚目が２列目に改行されてしまっていたことがあります。 そこでmarginをブラウザに自動割り振りさせることが出来ないものかと思案するのですが・・・ とりあえず右端の画像を右端に寄せるために margin-right: 0px; margin-left: auto; としてみましたがダメでした。でも width: 125px; もしくは float: right; を挿入すれば解決できます。 しかしながら真ん中の２枚をどうすれば均等に配置できるかが分かりません。 この場合、古いブラウザを試せる環境を全部揃えて片っ端からチェックを入れるしかないのでしょうか。 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- * { font-size: 14px; font-wight: 100; color: #000000; } .wrap { margin: 0px auto; width: 700px; } .logo { border: solid 1px #FF0099; } .main { padding-top: 15px; padding-bottom: 15px; border: solid 1px #FF0099; } .main img { margin-right: 2px; float:left; display: block; } .menu { float: left; margin-top: 0px; margin-left: 10px; padding-left: 0px; } .menu li { margin-bottom: 2px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; width: 100px; list-style-type: none; background-color: #FFCCFF; } .list span { color: #FF0099; } .menu a:link { color: #FF0099; } .menu a:visited { color: #FF0099; } .menu a:active { color: #FF0099; } .menu a:hover { color: #FF0099; } .clear { clear: both; } /* インデックス */ .index_body { margin-top: 15px; padding-left: 133px; } .sample { margin-bottom: 10px; width: 550px; text-align:center; background-color: yellow; } .sample a { text-decoration: none; } .sample img { border: solid 1px #FF0099; float: none; } .sample .left { float: left; margin: auto auto auto 0px; text-align: center; } .sample .middle { float: left; margin: auto; text-align: center; } .sample .right { margin-right: 0px; margin-left: auto; text-align: center; } --> </style> </head> <body> <div class="wrap"> <div class="logo"> <img src="dot_999999.gif" width="698" height="120"> </div><!-- end of "logo"--> <div class="main"> <ul class="menu"> <li>ああ</li> </ul><!-- end of menu --> <div class="index_body"> <div class="sample"> <div class="left"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "left" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 1of"middle" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 2of"middle" --> <div class="right"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "right" --> </div><!-- end of "sample" --> <div><img src="dot_999999.gif" width="550" height="450" alt="" /></div> <div class="clear"></div> </div><!-- end of "index_body" --> </div><!-- end of "main" --> </div><!-- end of "wrap" --> </body> </html>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
imgに対してborder:0px 画像を配置するインライン要素に対してwidth:550px 画像自体のimgで4/550の横幅に成る様にimgの属性で指定。 コレが基本と成るのでは？ ブラウザに関しては少なくともIEでは6以降。 Firefoxでは2以降を考えれば良いと思う。
- hyter
- ベストアンサー率73% (31/42)
とりあえず古いIE環境での動作チェックというのであれば。 IETester http://www.my-debugbar.com/wiki/IETester/HomePage 画像を一列に並べる件については下記URLの方法ではどうでしょうか？ http://www.yomotsu.net/lab/css/layout_justify-images
補足
以下のようにして見ました。 .sample { margin-bottom: 10px; width: 550px; border-style: none; background-color: yellow; } .sample A { TEXT-DECORATION: none; } .sample ul { margin-right: 2px; padding: 0px; text-align: justify; text-justify: distribute-all-lines; } .sample ul:after{ content: url("css_justify.png"); line-height: 10px; } .sample ul li{ display: inline; } .sample ul img { width: 123px; height: 194px; border: solid 1px #FF0099; } .sample ul div { display: inline-block; width: 123px; text-align: center; } <div class="sample"> <ul> <li> <div> <img src="dot_999999.gif" alt="ああああ"> aaaaa </div> </li> <li> <div> <img src="dot_999999.gif" alt="ああああ"> aaaaa </div> </li> <li> <div> <img src="dot_999999.gif" alt="ああああ"> aaaaa </div> </li> <li> <div> <img src="dot_999999.gif" alt="ああああ"> aaaaa </div> </li> </ul> </div> これをＦＣ２にアップしたのが以下のURLですが、何故か上手く表示されません。 http://makoji.web.fc2.com/test/test_18/test2.html ローカルサーバー（An Httpd）で実行すると、４枚横に並び、右端・左端も下の画像とあっているのですが。 そこでリモートサーバーにアップしてみました。 http://kojima.sppd.ne.jp/test3.htm こちらでは４枚横に並んでいますが、右端がズレています。 ローカルサーバーで編集していた際に、div.sampleの右端が微妙に右にはみ出していたので、 margin-right: 2px; としたのですが、ローカルサーバーではこれで丁度よかったのが、リモートサーバーでは逆にズレを生じさせているようです。 ここまでブラウザはＩＥ８です。 Opera、Chrome、FireFox、Safariを調べると、この４ブラウザは全て同じ挙動を示し、ＦＣ２では問題なく４枚横に並んで両端もキチッと下の画像に揃っています。しかしリモートサーバーでは.sample ul:afterで２行目に記述しているcss_justify.pngが一行目に表示されてしまいます。 同じファイルでサーバーが違うと表示が変わるということがあるのでしょうか。聞いたことがないのですが・・・
補足
border: #ff0099 1px solid; としました。 >画像を配置するインライン要素に対してwidth:550px 画像をどの要素で並べるかですが、divタグもliタグもブロック要素なので、その属性に display: inline; を指定するという意味でよろしいでしょうか。 >画像自体のimgで4/550の横幅に成る様にimgの属性で指定。 4/550は550pxを４等分しなさいという意味ですよね。 これをimgの属性として指定した場合、画像間の隙間は無くなってしまうと思うのですが・・・ 画像を入れるブロックの幅を550pxの1/4にした場合、ブロックの中央に画像を配置すると最も左の画像の左端は下の画像の左端と一致せず、同様に最も右の画像の右端も下の画像の右端と一致しなくなります。 この両画像をそれぞれ下の画像と端が揃うように配置すると、画像の逆側の端には画像を中央配置した場合の２倍の隙間が出来ることになります。中央の２枚はこの隙間も含めて均等に配置しなくてはならないので、この指定をどうすればいいのか・・・ どう考えるべきでしょう。 ************** すみません。ここから下はhyterさんへのレスです。勝手にスペースをお借りして申し訳ありません。 なおNO.1の補足でご報告しましたサーバーによる表示の違いですが、私が契約しているリモートサーバーとローカルサーバーのズレに関しては、リモートサーバーにアップする際のミスでした。ulタグのafter属性で指定しているcss_justify.pngのパスが通っていませんでした。今はパスを通して、キチンと両端が揃っている状態で均等割り付けが実現しています。 ＦＣ２については未だに何故か分かりません。ＦＣ２に関しては、ご相談前の４枚が均等割り付けされていない段階から、下の画像の両横の赤枠が消えている不具合もありました。これまで本題と違うので取り上げてこなかったですけど、これも何故か分かりません。 多分にＦＣ２では自サイトへのタグを記述するためのJavascriptが強制的に挿入されるので、このJavascriptが原因ではないかと思うのですが・・・良く分かりません。もっとも実際に立ち上げるサイトはＦＣ２を使わないから、この問題はとりあえず忘れようと思います。 ************** そうするとNo.1の補足でアップしましたコードで一応の解決は出来た訳ですが、このコード、教えていただいたIETesterを使って見たところ、キチンと表示されるのはＩＥ８だけのようです。 No.1の補足でアップしたコードは画像とそのコメント（aaaaa）を一つのliタグの中に入れるために、教えていただいたサイトのサンプルページでは <LI><IMG alt="" src="img01.png" width=100 height=100></LI> となっているのを <li> <div><img alt="ああああ" src="dot_999999.gif" /> aaaaa</div> </li> とアレンジしたためのようです。 そこで画像だけのリスト、コメントだけのリストと二つに分けたところ、綺麗に並びました。 ただ画像とコメントはペアなので、データの正確からいうと、この二つを一つのliタグに格納できないかと思案しています。