よくある写真＋文字が横並びのときのCSS

HTML

よくある写真＋文字が横並びのときのCSS

http://dl.dropbox.com/u/31478093/mihon.jpg
みたいなレイアウトをHTML+CSSで組む時に画像＋文字をinline-blockにしてますが、文字が長くなることもあるのでdiv.itemに対してwidthが必要になります。
ただそれだと写真のサイズによってwidthを設定し直さないといけないのでこのレイアウトをもっと手っ取り早くフレキシブルに組みたい。

JSでwidth取得はなし、table使うのはなし、IE6でも再現可能　という条件で何とかしたいです。

woodroots
2011/8/3 20:19

タグ：
タグはありません

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
.item {
    display: inline-block; /* IE67対応は省略 */
    width: 200px;  /* これを指定したくない。dt（というかdt>img）のwidthによって可変にしたい */
}
</style>
<div class="module">
    <dl class="item">
        <dt><img src="img/img.jpg" alt="" /></dt>
        <dd>あああああああああああああああああ</dd>
    </dl>
    <dl class="item">
        <dt><img src="img/img.jpg" alt="" /></dt>
        <dd>あああああああああああああああああ</dd>
    </dl>
    <dl class="item">
        <dt><img src="img/img.jpg" alt="" /></dt>
        <dd>あああああああああああああああああ</dd>
    </dl>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

このコードをツイートする