一个简单的图文混排的方法
以前我实现图文混排都是用表格,左边百分之多少是图片,右边百分之多少是文字。
这两天在网上看一些代码教程,无意中看到了一个简单的图文混排的方法,帖出来与大家分享:
用的是float属性
我们先看看用它作的一个页面效果(如下图):
您是不是以为在图片那里插入了一个表格才实现这种图文混排的效果的呢?
其实不是的,在这里只是在图片部分中定义了一下<img>的float和margin属性,代码如下:
<DIV style=”FLOAT: left; MARGIN-RIGHT: 2em“><IMG alt=floating src=”图片地址”></DIV> 文字
参数说明:
float(浮动):可取left, right两个值,决定图片偏向的方向
margin(空白):最多可设MARGIN-RIGHT(左边空白)、MARGIN-LEFT(右边空白)、MARGIN-TOP(顶部空白)和MARGIN-BOTTOM(底部空白)四个参数,属性值为:数值+PX(像素)、EM(字线m的宽度)、EX(字母x的高度)、mm(毫米)等
怎么样?简单吗?嘿嘿,这比用表格少了不少的代码^_^喜欢就拿去用吧~~
部分资料参考:洪恩在线