<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像と文の配置</title>
<style>
figure.base{
border:1px solid black;
width:25em;height:18em;
}
.base figcaption::before{
content:"■";
}
.base figcaption::after{
content:"■";
}
</style>
</head>
<body>
<h1>画像と文の配置</h1>
<article>
<h2>基本問題</h2>
<div style="display:flex;flex-wrap:wrap;">
<figure class="base">
<figcaption>画像を文字として配置</figcaption>
<div style=""><img src="image/image.png">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base">
<figcaption>画像を独立したボックスとして配置</figcaption>
<figure><img src="image/image.png"></figure>
<div style="">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base">
<figcaption>画像の周りに文字を回り込ませる</figcaption>
<figure style=""><img src="image/image.png"></figure>
<div style="">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base">
<figcaption>段組風(display:table-cell)</figcaption>
<figure style=""><img src="image/image.png"></figure>
<div style="vertical-align:top;">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base" style="height:15em;">
<figcaption>段組風(float)</figcaption>
<figure style=""><img src="image/image.png"></figure>
<div style="width:10em;">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base">
<figcaption>段組風(position)</figcaption>
<figure><img src="image/image.png"></figure>
<div style="top: calc( -1em - 100px );left:calc(3em + 160px);width:10em;">画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</figure>
<figure class="base">
<figcaption>段組風(flexbox)</figcaption>
<div style="">
<figure><img src="image/image.png"></figure>
<div>画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。画像に対する説明文。</div>
</div>
</figure>
<figure class="base">
<figcaption>画像と文字の重ね合わせ</figcaption>
<div style="">
<figure><img src="image/image.png"></figure>
<div style="top:0px;left:3em;">画像に対する説明文</div>
</div>
</figure>
</div>
</article>
</body>
</html>