- 締切済み
画像の位置指定
<img src="画像.png" /> <img src="画像.png" /> これを均等な間隔で |←→画像←→画像←→| このように表示させるやり方を、教えて頂きたいです。 質問の意味が不明でしたら、すいません。 ご教授を宜しくお願いします。
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
並べるのは二つの画像で各画像の縦横幅は同じであり、「|←→画像←→画像←→|」は ---------------------------------------------------------------------- 左余白【A】＜画像1＞画像1と画像2の間の余白【B】＜画像2＞右余白【C】 ---------------------------------------------------------------------- とした場合、【A】＝【B】＝【C】という解釈で宜しいでしょうか？ であれば、リストタグを使ってマークアップする方法もあるかと思います。 以下は、幅520pxのエリアにW200px×H50pxの画像を2つ均等に並べる、という想定でのサンプルです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <ul class="sample"> <li><img src="./images/hogehoge1.png" alt="テキスト" width="200" height="50" /></li> <li><img src="./images/hogehoge2.png" alt="テキスト" width="200" height="50" /></li> </ul> ---------------------------------------------------------------------- 【CSS】パターン1 ---------------------------------------------------------------------- ul.sample { width: 520px; height: 50px; list-style: none; padding: 0; margin: 0; } ul.sample li { float: left; padding: 0 0 0 40px;（※エリアの幅から画像の幅を引いた値を3等分した値） margin: 0; } ul.sample li img { vertical-align: bottom; } ---------------------------------------------------------------------- 【CSS】パターン2 ---------------------------------------------------------------------- ul.sample { width: 480px; height: 50px; list-style: none; padding: 0; margin: 0 0 0 40px; } ul.sample li { width: 50%; float: left; padding: 0; margin: 0; } ul.sample li img { vertical-align: bottom; } ---------------------------------------------------------------------- パターン1とパターン2の違いは、<ul>の幅をコンテンツの幅一杯に合わせて【A】【B】【C】に余白をpaddingで3等分するか、<ul>に予め【A】の幅を引いた分のwidthを与えて残りの領域を50％づつにしてやるか、という事です。どちらも表示結果は一緒です。 実装のイメージが違う様でしたら詳細を補足して下さい。
<html> <body> <img src="" width="100" height="100" style="margin:40px 20px 40px 40px"> <img src="" width="100" height="100" style="margin:40px 40px 40px 20px"> <br> margin:上 右 下 左
- js_player
- ベストアンサー率83% (10/12)
<style type="text/css"> <!-- p.column_left, p.column_right{ width:49%; margin:0; padding:0; text-align:center; } p.column_left{ float:left; } p.column_right{ float:right; } p.footer{ clear:both; overflow:hidden; height:1px; } --> </style> <p class="column_left"><img src="..."></p> <p class="column_right"><img src="..."></p> <p class="footer"> </p> このようなものでしょうか？意味を取り違えていたらごめんなさい。
