HTML でテキストの折り返しを実装する例 (HTML でテキストと画像が混在)

1. 画像の周りのテキスト

通常のものを使用する場合、たとえば次のようになります。

コードをコピー

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

<表セルパディング="15" 幅="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>こちらが通常のものです。国内のVBサイトの中でも、vbgoodは毎日更新され、情報も豊富で、プログラミング愛好家に深く愛されています。 </TD>
</TR>
</表>

このような文章では、画像がテキストよりも高い場合、テキストの上に空白スペースができます。ページのパフォーマンスが非常に悪いです。どうすれば解決できるでしょうか?このコードを見てください:

コードをコピー

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

<表セルパディング="15" 幅="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hspace="1" align="LEFT" hight=60>こちらはラップアラウンドレイアウトです。国内のVBサイトの中でも、vbgoodは毎日更新され、情報も豊富で、プログラミング愛好家に深く愛されています。 </TD>
</TR>
</表>

この問題は、img 要素に align="center" という属性を追加することで解決できます。簡単ですよね？ hspace は、画像と周囲の要素の幅を定義します。包装の有無は問いません。

これはどうやって作られたのですか?まずこのコードを見てみましょう:

コードをコピー

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

<テーブル 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>国内の VB サイトの中でも、vbgood は毎日更新され、情報量が豊富で、プログラム愛好家に深く愛されています。（終了）</td></tr>
</テーブル>

どうすればそのような効果が得られるのでしょうか?

コードをコピー

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

<テーブル 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は毎日更新され、情報も豊富で、プログラミング愛好家に深く愛されています。（終了）</td></tr>
</テーブル>

このコードスニペットで説明されています。賢い人なら一目でわかるでしょう。拡大したい単語をこの表に入力するだけです。

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

コードをコピー

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

<テーブル 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 は毎日更新され、情報も豊富で、プログラム愛好家に深く愛されています。（終了）</td></tr></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 は毎日更新され、情報も豊富で、プログラム愛好家に深く愛されています。（終了）</td></tr></table>

<<: CSS のマージンの崩壊問題を解決する方法

>>: レスポンシブ Web デザイン手法を実装し、ウォーターフォールモデルに別れを告げる 5 つのステップ (グラフィックチュートリアル)