CSS中设置图文混排

最新推荐文章于 2025-05-16 21:49:52 发布

量变决定质变

最新推荐文章于 2025-05-16 21:49:52 发布

阅读量7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ————CSS

本文链接：https://blog.youkuaiyun.com/nangeali/article/details/52712898

————CSS 专栏收录该内容

39 篇文章

订阅专栏

CSS中设置图文混排

Word中文字和图片有很多排版的方式，在网页中可以通过CSS设置各种图文混排的效果。

文字环绕

文字环绕在实际页面中非常的常用，如果，配合内容、背景等多种手段也可以达到绚丽的效果。

CSS中是通过给图片设置float属性，来实现文字环绕的。

<span style="font-size:24px;"><html>
	<head>
		<title>
			图文混排
		</title>
		<style type="text/css">
			<!--
			body{
			background-color:bb0102;
			margin:0px;
			padding:0px;
		}
			img{float:left;
		}
			p{
			color:#FFFF00;
			margin:0px;
			padding-top:10px;
			padding-left:5px;
			padding-right:5px;
		}
			span{
			float:left;
			font-size:85px;
			font-family:黑体;
			margin:0px;
			padding-right:5px;
		}
			-->
		</style>
	</head>
	
	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0">
		<p><span>春</span>节远古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>
		<p>据《诗经》记载，没到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，是节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之欢，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，便于朝野，彻夜无停。”</p>
	</body>
</html></span>

代码如上，除了使用了float-left使文字环绕图片之外，还使用了首字放大的效果，可以看到首字放到和图片环绕的方式几乎是完全相同的，只不过对象分别是文字和图片而已。

如果，将float的属性值设置为right，则图片会移动到页面的右边，而文字则会环绕在左边。

设置图片和文字间距

在文字环绕中，文字紧紧环绕在图片的周围，可以设置文字和图片之间的距离，

只需要给img标记添加padding属性即可。

<span style="font-size:24px;"><html>
	<head>
		<title>
			图文混排
		</title>
		<style type="text/css">
			<!--
			body{
			background-color:bb0102;
			margin:0px;
			padding:0px;
		}
			img{float:left;
			margin-right:50xp;
			margin-bottom:25px;
		}
			p{
			color:#FFFF00;
			margin:0px;
			padding-top:10px;
			padding-left:5px;
			padding-right:5px;
		}
			span{
			float:left;
			font-size:85px;
			font-family:黑体;
			margin:0px;
			padding-right:5px;
		}
			-->
		</style>
	</head>
	
	<body>
		<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0">
		<p><span>春</span>节远古时叫“元旦”。“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。此后，农历年的习俗就一直流传下来。</p>
		<p>据《诗经》记载，没到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，是节日气氛更浓。到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载：“除夕之欢，夜子初交，门外宝炬争辉，玉珂竞响。……闻爆竹声如击浪轰雷，便于朝野，彻夜无停。”</p>
	</body>
</html></span>

代码如上，可以看到文字和图片的距离，明显变远了，如果把margin的值设置为负数，那么文字就会移动到图片的上方。