ホームページ  >  記事  >  ウェブフロントエンド  >  htmlのテキスト折り返し解析例(html画像とテキストの混在配置)

htmlのテキスト折り返し解析例(html画像とテキストの混在配置)

高洛峰
高洛峰オリジナル
2017-03-06 16:19:382747ブラウズ

Word でテキストを折り返す方法はわかりましたが、それを Web ページに実装するにはどうすればよいでしょうか?これは言葉で言うほど簡単ではありません。ただし、優れた HTML 要素を使用している限り、この効果を実現できます。 一般に、折り返しにはいくつかの種類があります。画像の周りのテキストの回り込み、テキストの周りのテキストの回り込みなどです。私が話したいのはこの二つです。さて、始めましょう

1. 画像の周囲にテキストを折り返す

通常のものを使用すると、たとえば:

コードは次のとおりです:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>这里是普通的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>

このようなステートメントでは、画像がテキストの高さよりも高くなります。 , テキストの上に空白スペースができます。ページの効果は非常に悪いです。どうやって解決すればいいでしょうか?このコードを見てください:

コードは次のとおりです:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。</TD>
</TR>
</TABLE>


この属性をimg要素に追加することで解決できます: align="center"、問題は解決されます。単純にする! hspace に関しては、画像と周囲の要素の幅を定義します。バイパスされるかどうかは関係ありません。

これはどうやって作られたのですか?まずこのコードを見てください:

コードは次のとおりです:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font> </table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>


このような効果を実現するにはどうすればよいですか?

コードは次のとおりです:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0><font color=red size="5"><b>在</b></font>
</table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr>
</table>


このコードはそれを説明しています。賢い人なら、この表に拡大したい単語を入力するだけですぐにわかります。

しかし、テキストに背景色を付けたい場合は、どうすればよいでしょうか?ああ、あなたはとても賢いですね、次のようにテーブルに bgcolor 属性を追加します:

コードは次のとおりです:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><font color=red size="5"><b>在</b></font></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>


でも、それは出てくるでしょうか?いいえ、何か追加する必要があります (次回はすぐに答えないように注意してください:)、次のようになります:

コードは次のとおりです:

<table align=left cellspacing=0 cellpadding=0 width=200 border=1>
<tr>
<td><table align=left cellspacing=0 cellpadding=0 bgcolor=#C0C0C0><td><font color=red size="5"><b>在</b></font></td></table>国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。(End)</td></tr></table>

テキスト折り返しの HTML の例 (HTML 混合グラフィックスとテキスト) 分析例関連記事はPHP中国語サイトにご注目ください!

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。