小技をBLOGに集結!

pelican-puzzle

画像の下に文字を回り込ませない

画像の回りに文字の回り込み

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

画像の下に文字を回り込ませない

CSS

.content {
  padding: 0 0 0 340px;
  position: relative;
}
.content img {
  position: absolute;
  left: 10px;
  top: 10px;
}

 
html

<div class="content">
  <img src=".gif" alt="image" border="0" width="300" height="150" />
  <p>ここに文章を入れます</p>
</div>
pk-004

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

 
 
 
 

関連記事

  1. enkei01
  2. marker1
  3. 7220032bb1abbfa8d3ffbd64edd01182_s
  4. up-down

最近の記事

  1. wordpress-800x480
  2. marker1

    2019.07.6

    文字装飾
  3. kigou1
  4. 7220032bb1abbfa8d3ffbd64edd01182_s
  5. p_s

スマホやタブレットでも大丈夫!

mb300x142

ポップメディア直営サイト

ポップメディア:Web制作支援
 
〒112-0011東京都文京区千石2-33-10-102
 
URL https://popmedia.jp/
 
TEL:03-6912-08214
 
モバイル:080-3409-4566
 
popmedia
contact-bana
PAGE TOP