キャプション付き画像に本文を回り込ませる 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: "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 decoding="async" loading="lazy" src="image.png" alt="image" width="120" height="90"></p>
<p class="caption">画像のキャプション</p>
</div>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
</body>
実際の動作サンプル ———————————————————————-