テキストと画像の挿入(画像の左右配置、画像の中にテキスト)

1.画像を左(又は右)に入れて、テキストをその横に入れる

 画像は挿入時、左寄せで挿入し、テキストは記述時、ツールボタンの左寄せでいれて、双方うまく入っている。この後、次の項目に移りたいので、ここで改行しても、そのまま右に入ってします。

ここから次に画像の下から記述したいのだが!

このようになってしまう。

  筆者は、最後に以下のよソースコードを入れ対応しているが、お知らせ本文域で対応する方法はあるのだろうか。 
Souce Code
<div style="clear:both;"></div>

尚、注意点は、このコードを入れた後、本文編集で画像やテキストを入れると、Souce Codeの divタグ の中に入ってしまう。ソース編集で、pタグなどを入れておくと良い。

2.画像の中にテキストと別画像を入れる

マウス・ホバー

NetCommons3

☆ テキストは、NetCommons3
☆ 中の画像は、マウス・ホバー・マーク

作成方法
1.ボックスを作成
  style を position:relative;
2.ボックスの中に
  テキストと入れ子画像を挿入。
  2つとも、position:absolute;に。
  2つの挿入位置を指定。
   例:top:50px; right:20%;

 
Source Code
<div style="float: left; position: relative;">
<p><img class="img-responsive nc3-img pull-right" title="" src="https://www.nc.k-nagai.com/nc/wysiwyg/image/download/1/8/small" alt="" width="394" height="262" /></p>
<p><img class="img-responsive nc3-img center-block" style="position: absolute; top: 50px; left: 20%;" title="マウス・ホバー" src="https://www.nc.k-nagai.com/nc/wysiwyg/image/download/1/49" alt="マウス・ホバー" /></p>
<p style="position: absolute; top: 30px; left: 5%; color: #ff0000; font-weight: bold; font-size: 1.5em;">NetCommons3</p>
</div>