返回首页 | 网站案例 | 帮助中心

合作共赢、快速稳定、服务地方的网站建设提供商

北京网站建设

服务热线:13812345678

HTML如何实现文字环绕图片

时间:2012-7-27

  大家肯定在各种图书,杂志和报纸上见过这种排版方式;一个图像出现在一栏文字中,文字绕开图像继续前行,就像水流绕过石头一身孕,在HTML的早期版本中,使用一种现在已经不用的align属性实现这种效果,但是现在可以用CSS中的float属性做同样的事。

  float属性有3种值:left,right,none.当一个元素“浮动”起来时,它会尽可能地向某一边(左边或者右边)移动,直到其(外)边缘碰到包含块的(内)边缘(或直到碰到另一个浮动元素),随后的文字或元素将绕开浮动元素向下流动,默认值none主要用于覆盖样式表中另一条规则给予元素的浮动属性。

  但是一般用了float排版后图片和文字是紧挨着的,在CSS代码中有必要加上与左或者右间距的代码,如:
.img{
  float:left;
  margin-right:10px;
  margin-bottom:10px;
}


建站流程

    北京网站建设流程