- ベストアンサー
画像の横に回りこみして並べるには？
最近htmlを勉強し始めたのですが、初心者なため行き詰ってしまいました・・・。 どうかご教授お願い致します。 ■■■■コメント ■画像■コメント ■■■■コメント 上記の様に右にコメントを表示させるように出来るのですが、 これを２列にして複数画像とコメントを載せるには どのようにしたらよいのでしょうか？ ■■■■コメント ■■■■コメント ■画像■コメント ■画像■コメント ■■■■コメント ■■■■コメント ■■■■コメント ■■■■コメント ■画像■コメント ■画像■コメント ■■■■コメント ■■■■コメント
- princess00
- お礼率82% (124/150)
- HTML
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <br clear="left"> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> <div style="float:left;"><img src="image.jpg" align="left">コメント<br>コメント<br>コメント<br></div> CSS（スタイルシート）でfloat:leftを指定すると、左から順番に詰められます。 ＊<img>のalignでコメントを回り込みさせる ＊<div>のfloatで、[画像とコメントの一式]を左寄せに流し込みます。 ＊一括指定できるならば、そうした方がいいかもしれません。 <head> <style type="text/css"> <!-- div{ float:left; width:◯◯;} --> </style> </head> ※参考URL：floatの仕組み
その他の回答 (2)
CSSデザインの場合の例を示します。 画像サイズ・パディングの調整などは、ｃｓｓで調整できます。 ■HTML <div class="box"> <div class="inner-left"> <img src="" > <p class="comment">コメント</p> </div> <div class="inner-right"> <img src="" > <p class="comment">コメント</p> </div> </div> <div class="dummy"></div> <div class="box"> <div class="inner-left"> <img src="" > <p class="comment">コメント</p> </div> <div class="inner-right"> <img src="" > <p class="comment">コメント</p> </div> </div> <div class="dummy"></div> </body> </html> ■css定義（○○○.css） HTMLのhead内に <link href="○○○.css" rel="stylesheet" type="text/css" /> と書けばcssファイルがリンクされて適用されます。 cssファイルの内容： * { margin:0px; padding:0px; } .box { clear:both; width:500px; margin-right:auto; margin-left:auto; } .inner-left { float:left; width:250px; } .inner-right { float:left; width:250px; } .box img { display:block; float:left; padding-right: 10px; } .box .comment { display:block; float:left; padding-right: 10px; } .dummy { clear:both; display:block; height:1px; width:1px; line-height:1px; }
お礼
なるほど。 参考になりました～ ありがとうございました。
- diszo
- ベストアンサー率78% (32/41)
的外れかもしれませんが、 テーブルで表示してみるのはいかがでしょうか？ 例： <table border="0"> <tr> <td>画像</td> <td>こめんと</td> <td>画像</td> <td>こめんと</td> </tr> <tr> <td>画像</td> <td>こめんと</td> <td>画像</td> <td>こめんと</td> </tr> </table>
お礼
テーブル・・・思いつきませんでした～ でも、とても参考になりました。 ありがとうございました。
お礼
とても参考になりました。 ありがとうございました。