Example analysis of text wrapping in html (html mixed arrangement of images and text)

We know how to wrap text in word, but how to implement it on a web page? This is not as easy as in word. But as long as you use good html elements, you can still achieve this effect. Generally, there are several types of wrapping: text wrapping around pictures, text wrapping around text, etc. What I want to talk about are these two. Okay, let’s start

1. Text wrapping around the picture

If we use normal, for example:

The code is as follows:

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

like this If the picture in the sentence is taller than the text, there will be a blank space above the text. The effect of the page is very poor. How to solve it? Please look at this code:

The code is as follows:

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

The problem can be solved by adding this attribute to the img element: align="center" . Keep it simple! As for hspace, it defines the width of the picture and surrounding elements. It doesn't matter whether it is bypassed or not.

How was this done? Take a look at this code first:

The code is as follows:

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

How to achieve such an effect?

The code is as follows:

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

This code explains it. If you are smart, you will know it at a glance. Just put the words you want to enlarge in this table. That's it.

But now if I want the text to have a background color, what should I do? Ha, you are so smart, add the bgcolor attribute to the table, like this:

The code is as follows:

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

But can it come out? No, I have to add something (remember not to answer so quickly next time:), like this:

The code is as follows:

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

More html to achieve text wrapping Please pay attention to the PHP Chinese website for related articles on sample analysis of arranging examples (mixed html image and text arrangement)!