- ベストアンサー
table を使用せずに、画像とテキストを同じ行に配置
table タグを使用せずに、画像とテキストを交互に同じ行に配置するようなことはできますでしょうか？ 例えばこのような感じです。 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 画像画像 テキスト 方法をご存知の方おられましたれらよろしくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
floatを使うときは横幅も必要です。 画面の横幅が合計に足りないと折り返されますけど。 下記は横幅が全部同じと考えた場合。違うならそれぞれにclassをつけるとか。 No.1さんのソース流用させていただきます。 <style type="text/css"> <!-- .box { float: left; width:100px; } .box2 { clear: both; } --> HTML部分 <div class="box"><img src="＊＊＊" alt=""></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box"><img src="＊＊＊" alt=""></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box"><img src="＊＊＊" alt=""></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box2"><p>以下回り込みを解除して下から続きます。</p></div>
その他の回答 (2)
？？？どういう事だかよくわからない tableのように整形しつつやりたいというのでないなら 特段考えないでimgとテキストを並べれば良い 整形しつつというなら縦方向にグループ化しつつ行う (やってる事はNo1と変らない) <div> <div style="float:left"> <img src="11.png">text1行1列<br> <img src="21.png">text2行1列<br> <img src="31.png">text3行1列<br> </div> <div style="float:left"> <img src="12.png">text1行2列<br> <img src="22.png">text2行2列<br> <img src="32.png">text3行2列<br> </div> <div style="float:left"> <img src="13.png">text1行3列<br> <img src="23.png">text2行3列<br> <img src="33.png">text3行3列<br> </div> <div style="clear:both"></div> </div> <div>以下略</div>
お礼
＃３さんの回答でやりたかったことができました。 ありがとうございました。
- 345itati
- ベストアンサー率48% (795/1639)
スタイルシートで出来ます。 CSS部分(<head></head>間に記述 <style type="text/css"> <!-- .box { float: left; } .box2 { clear: both; } --> HTML部分 <div class="box"><img src="＊＊＊"></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box"><img src="＊＊＊"></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box"><img src="＊＊＊"></div> <div class="box">テキストテキスト<br>テキストテキスト</div> <div class="box2"><p>以下回り込みを解除して下から続きます。</p></div> 参考→http://www.tagindex.com/stylesheet/box/float.html
お礼
ありがとうございます。大変参考になりました。
お礼
ありがとうございます。イメージしていたようにできました。 感謝いたします。