HTMLで画像とテキストを混在させて配置する方法-htmlチュートリアル-php.cn

HTMLで画像とテキストを混在させて配置する方法

php中世界最好的语言

リリース： 2018-02-05 09:35:16

オリジナル

11968 人が閲覧しました

今回は、HTMLで画像とテキストの混合配置を実装する方法と、HTMLで画像とテキストの混合配置を実装するための注意点について説明します。以下は実際のケースです。

画像の周りのテキストの回り込み

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

<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>

ログイン後にコピー

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

ページのキャッシュを無効にする方法

Flash ビデオ形式 (flv、swf) ファイルを html に追加する方法

以上がHTMLで画像とテキストを混在させて配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。