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

最新推荐文章于 2024-04-09 19:34:35 发布

丫呀nice

最新推荐文章于 2024-04-09 19:34:35 发布

阅读量2.8k

点赞数 2

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/weixin_46100406/article/details/105140121

版权

CSS 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 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">
		<!-- vspace 表示图片与文字的上下距离，hspace表示左右距离 -->
		
			<img class="tu" src="1.jpg" align="left" hspace="10px" vspace="10px" width="100px" height="100px" alt="">
			<!-- <h5 align="left">图像标题<h5> -->
				<!-- vspace 表示图片与文字的上下距离，hspace表示左右距离。 -->
		
			<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;

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

3.2word-wrap : break-word;

允许长单词换行到下一行
在这里插入图片描述

丫呀nice

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS实现文字环绕图片布局

1.CSS 利用float: left<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa{ width: 500px }...
复制链接

扫一扫