[ 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: "MS Pゴシック", 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 id="contents">
    <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>

実際の動作サンプル

コメントを残す

メールアドレスが公開されることはありません。