[分享]css可以设置图文混排的效果

CSS可以帮助我们在页面中创建出图文混排的效果。在Web开发中，我们常常需要在一篇文章或者页面的某个区域中运用大段的文字与多张图片构建出一个景色瑰丽的视觉效果。有些时候，我们还会把文字和图像混排在一起...

CSS可以帮助我们在页面中创建出图文混排的效果。在Web开发中，我们常常需要在一篇文章或者页面的某个区域中运用大段的文字与多张图片构建出一个景色瑰丽的视觉效果。有些时候，我们还会把文字和图像混排在一起，而这时候，就需要用到CSS来实现。

img {
	max-width:100%;
	height:auto;
}
p {
	margin:0 0 1.5em;
	text-align:justify;
}
img + p {
	clear:both;
}
img.left {
	float:left;
	margin-right:1.5em;
}
img.right {
	float:right;
	margin-left:1.5em;
}
@media only screen and (max-width:68.75em) {
	img.left,img.right {
	float:none;
	margin:0 auto 1.5em;
	display:block;
}
}@media only screen and (max-width:31.25em) {
	p{font-size:16px;
}
}

在上述代码中，我们通过设置图片的最大宽度为100%，保证图片不会从容器中溢出，接着规定了p标签的外边距为0，内边距为1.5em，并将文本两端对齐。紧接着，我们为元素加入了一个+号连接的p选择器，当p紧接着img元素时，会清除图片浮动并形成一个单独的文本块。同时，我们定义了两个类left和right并使用它们来浮动图像。

还有，为了兼容各种设备屏幕，我们添加了特定的媒体查询，在viewport宽度较小时，我们会将图像展现为块级元素，而p的字体大小则会适当加大，确保阅读体验舒适，同时图片的左右浮动将不再有效。

这些代码加起来，用来设置图文混排效果的CSS是绰绰有余了，当然，我们也可以把这些代码放到一个样式表中，方便我们复用，让我们的代码更加的整洁优雅。