HTML/CSS实现文字环绕图片布局

骑猪看日落 2023-05-28 08:27 21阅读 0赞

# 1.CSS 利用float: left #

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		.aaa{ 
    			width: 500px
    
    		}
    		.tudiv{ 
    			width:120px;
    			height: 125px;
    			float: left;
    			text-align: center
    		}
    		.tu{ 
    			width:100px;
    			height: 100px;
    			
    		}
    		h5{ 
    			margin-top: 5px;
    		}
    		
    		P{ 
    			/*word-wrap : break-word;*/
    			/*允许长单词换行到下一行,如果P标签中是中文就不需要设置*/
    
    			word-break: break-all;
    			/*是否对单词进行断词处理。*/
    		}
    		
    	</style>
    </head>
    <body >
    	<div class="aaa">
    		<div class="tudiv">
    			<img class="tu" src="1.jpg" alt=""><br/>
    			<h5>图像标题<h5>
    		</div>
    			<p>
    				CSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGS
    			</p>
    		
    	</div>
    	
    </body>
    </html>

# 2.html 利用 align=“left” #

**vspace 表示图片与文字的上下距离，hspace表示左右距离。**

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	
    </head>
    <body >
    	<div style="width: 500px">
    		
    		
    			<img class="tu" src="1.jpg" align="left" hspace="10px" vspace="10px" width="100px" height="100px" alt="">
    			
    				
    		
    			<p style="word-break: break-all">
    				HTMLdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGVSGSCSSdgsjafbasdbcauefqyhwbdeCMCBMZCBHAFHSFYRSFBVHDBCERUFDFDSNVSDHGDJSFGNVJDSKNGV
    			</p>
    		
    	</div>
    	
    	
    </body>
    </html>

# 3文本中文或英文的处理 #

如果是中文 文本环绕设置是没有问题的，  
但若是英文，一长串的字母不空格会被认为欸是一个单词，无法换行，需要设置**word-break: break-all;**  
或是**word-wrap : break-word**即可

## 3.1 word-break: break-all; ##

是否对单词进行断词处理。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]

## 3.2word-wrap : break-word; ##

允许长单词换行到下一行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230528/356050c5356b406b9d4194e9f9afa5f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70 1]: /images/20230528/78cab9eed22c4e5e9b997d6cb8fb8fc2.png