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 {
margin: 18px;
padding: 0px;
font-family: sans-serif;
}
#container {
width: 302px;
}
h4 {
clear: both;
margin: 0 0 9px 0;
font-size: 18px;
line-height: normal;
}
p {
font-size: 12px;
line-height: 18px;
margin: 0 0 12px 0;
}
p.image-left {
margin: 3px 12px 12px 0;
padding: 0px;
border: 1px solid #CCCCCC;
float:left;
clear:left;
}
p.image-right {
margin: 3px 0 12px 12px;
padding: 0px;
border: 1px solid #CCCCCC;
float:right;
clear:right;
}
-->
</style>
</head>
<body>
<div id="container">
<div>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<div style="clear:both;"></div>
</div>
<h4 id="i-0">見出しの行で回り込み解除</h4>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</body>
実際の動作サンプル
ブロック毎に回り込みを解除するサンプル ———————————————————————-
サンプルコード
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>テキスト回り込みのサンプル</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
margin: 18px;
padding: 0px;
font-family: sans-serif;
}
#container {
width: 302px;
}
h4 {
margin: 0;
font-size: 12px;
font-weight: bold;
color: #FF6600;
line-height: 18px;
}
p {
font-size: 12px;
line-height: 18px;
margin: 0 0 12px 0;
}
p.image-left {
margin: 3px 12px 12px 0;
padding: 0px;
border: 1px solid #CCCCCC;
float:left;
clear:left;
}
p.image-right {
margin: 3px 0 12px 12px;
padding: 0px;
border: 1px solid #CCCCCC;
float:right;
clear:right;
}
div.item {
overflow: auto;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="item">
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-1">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-left"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-2">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-3">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
<div class="item">
<p class="image-right"><img decoding="async" loading="lazy" src="image.png" alt="" width="120" height="90"></p>
<h4 id="i-4">見出しの行も回り込みする</h4>
<p>テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。テキスト回り込みのサンプルです。</p>
</div>
</div>
</body>
実際の動作サンプル
Mac Internet Explorer 5.2, Mac Firefox 2.0, Mac Safari 2.0 で表示確認。