テキストを画像の右にしたいのですが・・

質問

ブログパーツで下記のものを使用しています。

<div style="text-align:left;padding-top:10px; padding-bottom:5px">
<iframe src="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe><p style="font-size:13px;
margin-top:2px;"></p></div>

このパーツの右に文章を回りこみさせたいのですが、どこにどのようなタグを挿入すればいいのでしょうか？
<div style="text-align:left;float:left;padding-top:10px; padding-bottom:5px">
ではうまくいきませんでした。

初心者ですが、よろしくお願いいたします。

回答No.3

ORUKA1951 · ベストアンサー

iframe閉じ忘れてました。
<iframe>ご利用中のユーザエージェントは、フレームに対応していないか、フレームを表示しないよう設定されているようです。こちらの <a href="foo.html">関連文書</A> を御覧ください。</iframe>ここから文章・・</p>

回答No.2

ORUKA1951

確認ですが、質問のタイトルには画像とあり、質問文はiframeなのですが、いずれでしょうか？(いずれもインライン要素なので大きな変わりはありませんが、iframeは、仕様上DOCTYPEはtransitionalになります。transitionalはHTML4.01では非推奨です。HTML5では存在しています。)
　文章をある要素の周囲を回りこませる指定は、floatです。画像にしろiframeにしろ、スタイルシートで指定します。
＊<div>
　　<iframe>
　　　<p></p>
　</div>
はおかしいです。ブラウザは無名ブロックを作ってしまいます。
＊<div>
　　<p>
　　　<iframe>
　　</p>
　</div>
です。iframeは行内要素なので、<p>内のiframeに続く文章が一行だけ表示されて次行はiframeの下に続きます。この様なときに指定するのがfloatです。

[例]
<p><iframesrc="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" scrolling="no">ここに文章が入る</p>
<p>引き続きまわりこみが続く文章</p>
<p class="newLine">回り込みを解除する文章</p>

とかになるでしょう。
　これに対して、スタイルシートは
p{
text-indent:1em;line-height:1.6em;margin:0;
}
p iframe{
float:left;
margin-right:1em;
}
p.newLine{
clear:left;
}

これでは、段落内のiframeは常に左によりますが、左右を分けたいときはiframe,imgにclass名をつけると良いでしょう。

なお、alignは非推奨属性です。brは強制改行ですからこの場合に使うことはしません。

スタイルシートを別途記入できない場合は、
<p><iframesrc="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" scrolling="no" style="float:left;margin-right:1em;">ここに文章が入る</p>
<p>引き続きまわりこみが続く文章</p>
<p style="clear:left;">回り込みを解除する文章</p>

としましょう。

補足

ご丁寧にありがとうございます。
申し訳ございません。ご確認事項の件は、iframeです。

下記の通り試してみたのですが、文字部分が表示されませんでした。

<div style="text-align:center; padding-top:10px; padding-bottom:5px">
<p><iframe src="http://chiccuri.sakura.ne.jp/blog_parts/kisotaisya.html" width="168" height="250" frameborder="0" scrolling="no"style="float:left;margin-right:1em;">ここに文章が入る</p>
<p>引き続きまわりこみが続く文章</p>
<p style="clear:left;">回り込みを解除する文章</p>
</iframe><p style="font-size:13px;margin-top:2px;"></p></div>

どこが間違っているのかご指摘願えないでしょうか。
よろしくお願いいたします。

回答No.1

ulti-star

＜img src="画像ファイルＵＲＬ" align="left"＞画像の右に回り込む文章＜br clear="all"＞

＜＞は半角に直してください。