画像の横にテキスト表示

質問

<dl>
<dt>画像</dt>
<dd>テキスト1</dd>
<dd>テキスト2</dd>
<dd>テキスト3</dd>
</dl>

上記のhtmlで画像とテキストの表示をしたく思っております。画像を基準にテキストは全て
画像の右側に表示させたいのですがどのようなcssをかけば実現できるでしょうか？

**********　テキスト1
*　　　　　　*　テキスト2
*　画像　　*　テキスト3
*　　　　　　*
**********

のようなイメージを想定しております。

ddが1つであればfloatで問題ないのですがddが複数ありddのみは縦に続けたいのですが方法がわからず
つまずいている状態です。詳しい方いらっしゃいましたら宜しくお願い致します。

回答No.1

salonpath · ベストアンサー

ddを分けるならddの中にliを入れてもいいかも知れないですよね

とりあえずダミーの画像を80*80で想定して書いてみました。
■css
<style type="text/css">
* {
padding:0;
margin:0;
}
#wrap {
width:200px;
border:1px solid #9C0;
}
dl {
position:relative;
}
dt {
position:absolute;
top:0;
left:0;
}
dd {
position:relative;
top:0;
left:90px;
background:#39F;
width:110px;
}
</style>

■html
<div id="wrap">
<dl>
<dt><img src="img/dummy_80.gif" width="80" height="80" alt="" /></dt>
<dd>あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお あいうえお <br />
text1<br />
text1</dd>
<dd>text2</dd>
<dd>text3</dd>
</dl>
</div>

お礼

お返事ありがとうございます。
floatで考えておりましたがpositionで楽々ですね！この方法で試したところ表示もOKでした！
新しい方法も覚え感謝です。本当にありがとうございました。