table を使用せずに、画像とテキストを同じ行に配置

解決済

質問者：jyuu
質問日時：2006/12/01 23:18
回答数：3件

table タグを使用せずに、画像とテキストを交互に同じ行に配置するようなことはできますでしょうか？

例えばこのような感じです。

画像画像テキスト画像画像テキスト画像画像テキスト
画像画像テキスト画像画像テキスト画像画像テキスト
画像画像テキスト画像画像テキスト画像画像テキスト

方法をご存知の方おられましたれらよろしくお願いいたします。　

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： goldfox
回答日時：2006/12/02 03:06

floatを使うときは横幅も必要です。

画面の横幅が合計に足りないと折り返されますけど。
下記は横幅が全部同じと考えた場合。違うならそれぞれにclassをつけるとか。
No.1さんのソース流用させていただきます。
<style type="text/css">

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>

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。イメージしていたようにできました。
感謝いたします。

通報する

お礼日時：2006/12/03 09:49

No.2

回答者： noname#39970
回答日時：2006/12/02 01:09

？？？どういう事だかよくわからない

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>

- 0
- 件

通報する

この回答へのお礼

＃３さんの回答でやりたかったことができました。
ありがとうございました。

通報する

お礼日時：2006/12/03 09:48

No.1

回答者： 345itati
回答日時：2006/12/01 23:27

スタイルシートで出来ます。

CSS部分(<head></head>間に記述
<style type="text/css">

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