[分享]css中文字环绕图片显示

CSS中文字环绕图片显示是一种非常常见的网页布局方式，能够增强页面的美观程度和排版效果。下面将介绍如何在CSS中实现文字环绕图片显示。/ 创建一个div容器 / div { float: left; ...

CSS中文字环绕图片显示是一种非常常见的网页布局方式，能够增强页面的美观程度和排版效果。下面将介绍如何在CSS中实现文字环绕图片显示。

/* 创建一个div容器 */
div {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
}
 
/* 规定图片的大小和位置 */
img {
   float: left;
   margin-right: 20px;
   margin-bottom: 20px;
   width: 200px;
   height: 200px;
}
 
/* 规定文字环绕图片 */
p {
   text-align: justify;
   -ms-text-justify: distribute-all-lines;
   text-justify: distribute-all-lines;
}
 
/* 清除浮动 */
.clear {
   clear: both;
} 

首先，创建一个容器div，设置浮动和外边距属性。接着，设置图片的浮动、外边距和大小。然后，通过CSS中的text-justify属性，控制段落的对齐方式，实现文字围绕图片显示的效果。最后，添加一个清除浮动的类，保证布局的稳定性。

需要注意的是，CSS中的文字环绕图片显示方式需在容器宽度足够大的情况下才有效果。

总之，CSS中文字环绕图片显示可以让网页排版更加美观和灵活，是网页设计常用的一种方式。