htmlのテキスト折り返し解析例（html画像とテキストの混在配置）-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-06 16:19:38

オリジナル

2802 人が閲覧しました

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中国語サイトにご注目ください！