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

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

サンプルコード ———————————————————————-

<html><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 id="contents">
    <div class="right">
        <p><img decoding="async" loading="lazy" src="image.png" alt="image" width="120" height="90"></p>
        <p class="caption">画像のキャプション</p>
    </div>
    <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>

実際の動作サンプル ———————————————————————-

キャプション付き画像の回り込み

コメントを残す