画像の回りに文字の回り込み
このように画像の右側の文章を配置した場合、文章が長くなると画像の下に文章が回りこみます。
これはこれでいいと言う人もいるかと思いますが、回り込ませない方法もありますので、紹介してみます。
どのようにするかは次のとおりです。特に問題ないですかね。
文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。
画像の下に文字を回り込ませない
1 2 3 4 5 6 7 8 9 |
.content { padding: 0 0 0 340px; position: relative; } .content img { position: absolute; left: 10px; top: 10px; } |
1 2 3 4 |
<div class="content"> <img src=".gif" alt="image" border="0" width="300" height="150" /> <p>ここに文章を入れます</p> </div> |

このように画像の右側の文章を配置した場合、文章が長くなると画像の下に文章が回りこみます。
これはこれでいいと言う人もいるかと思いますが、回り込ませない方法もありますので、紹介してみます。
どのようにするかは次のとおりです。特に問題ないですかね。
文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。文章が短いと回り込まないので念のため文章を書いてます。