[ CSS ] キャプション付き画像に本文を回り込ませるサンプル

キャプション付き画像に本文を回り込ませる CSS のサンプルを書いてみた。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>キャプション付き画像の回り込み</title>
<style type="text/css">
<!--
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: small;
    line-height: 1.5em;
    /*font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";*/
    margin: 1em;
}
#contents {
    width: 260px;
}
div.right {
    margin: 0.25em 0 0.5em 1em;
    float:right;
    clear:right;
    width: 120px;
}
p {
    margin-bottom: 1em;
}
.right p {
    margin: 0px;
}
.right p.caption {
    font-size: x-small;
    line-height: 1.25em;
    margin-top: 0.25em;
    margin-bottom: 1em;
}
-->
</style>
</head>
<body>
<div>
    <div class="right">
        <p><img src="image.png" alt="image" width="120" height="90" /></p>
        <p class="caption">画像のキャプション</p>
    </div>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>
</html>