Example of implementing text wrapping in html (mixed text and images in html)

1. Text around the image

If we use the normal one, for example:

Copy code

The code is as follows:

<TABLE cellpadding="15" width="200">
<TR>
<TD bgcolor="#EEEEFF"><IMG src="test.gif" hight=60>Here is the normal one. Among domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by programming enthusiasts. </TD>
</TR>
</TABLE>

In such a sentence, if the image is taller than the text, there will be a blank space above the text. The page performance is very bad. How to solve it? Please look at this code:

Copy 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>Here is a wraparound layout. Among domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by programming enthusiasts. </TD>
</TR>
</TABLE>

The problem can be solved by adding this attribute to the img element: align="center". Simple, right? As for hspace, it defines the width of the image and surrounding elements. It does not matter whether it is wrapped or not.

How was this made? Let’s take a look at this code first:

Copy code

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>Among </b></font> </table> domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by program enthusiasts. （End）</td></tr>
</table>

How to achieve such an effect?

Copy code

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>Among the domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by programming enthusiasts. （End）</td></tr>
</table>

This code snippet explains it. You, as a smart person, will know it at a glance. Just put the words you want to enlarge in this table.

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

Copy code

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>Among </b></font></table> domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by program enthusiasts. （End）</td></tr></table>

But can you come out? No, there is still something to add (remember not to answer so quickly next time :), like this:

Copy code

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>Among </b></font></td></table> domestic VB websites, vbgood is updated daily and has rich information, and is deeply loved by program enthusiasts. （End）</td></tr></table>

<<: How to solve the margin collapse problem in CSS

>>: 5 Steps to Implement Responsive Web Design Method and Say Goodbye to Waterfall Model (Graphic Tutorial)

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

Blog

JavaScript implements div mouse drag effect

Example of implementing text wrapping in html (mixed text and images in html)

A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)

JavaScript implements div mouse drag effect

MySQL 5.7.18 master-slave replication setup (one master and one slave) tutorial detailed explanation

SQL implementation of LeetCode (175. Joining two tables)

Setting z-index property for flash overlay popup layer in web design does not work

The difference and choice between datetime and timestamp in MySQL

Install CentOS system based on WindowsX Hyper-V

Detailed explanation of scp and sftp commands under Linux

Mysql online recovery of undo table space actual combat record

Sample code for implementing markdown automatic numbering with pure CSS

Recommend

Solution to MySQL connection exception and error 10061

Uniapp realizes sliding scoring effect

In-depth analysis of MySQL database transactions and locks

mysql update case update field value is not fixed operation

How to let DOSBox automatically execute commands after startup

Sample code for partitioning and formatting a disk larger than 20TB on centos6

Completely uninstall mysql. Personal test!

Vue3 list interface data display details

Detailed tutorial on installing ElasticSearch 6.4.1 on CentOS7

Detailed explanation of several API examples commonly used in advanced javascript front-end development

Practical experience of implementing nginx to forward requests based on URL

Detailed explanation of MySQL 5.7.9 shutdown syntax example

CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box

Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps

Graphic tutorial on installing Mac system in virtual machine under win10