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
Recommend
Vue practice of preventing multiple clicks
Generally, click events will be divided into diff...
Use of marker tags in CSS list model
This article mainly introduces the ::master pseud...
MySQL 5.7.17 installation and use graphic tutorial
MySQL is a relational database management system ...
Introducing multiple custom fonts in CSS3
Today I found a problem in HTML. There are many d...
How to choose the right index in MySQL
Let’s take a look at a chestnut first EXPLAIN sel...
Django+vue registration and login sample code
register The front-end uses axios in vue to pass ...
Use and understanding of MySQL triggers
Table of contents 1. What is a trigger? 2. Create...
Steps to restore code from a Docker container image
Sometimes the code is lost and you need to recove...
Solutions to black screen when installing Ubuntu (3 types)
My computer graphics card is Nvidia graphics card...
Explain MySQL's binlog log and how to use binlog log to recover data
As we all know, binlog logs are very important fo...
Detailed explanation of redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on th...
MYSQL updatexml() function error injection analysis
First, understand the updatexml() function UPDATE...
How to view and clean up Docker container logs (tested and effective)
1. Problem The docker container logs caused the h...
Pitfalls and solutions for upgrading MySQL 5.7.23 in CentOS 7
Preface Recently, I found a pitfall in upgrading ...
Test and solution for MySQL's large memory usage and high CPU usage
After the changes: innodb_buffer_pool_size=576M -...