一个简单的图文混排的方法


以前我实现图文混排都是用表格,左边百分之多少是图片,右边百分之多少是文字。
这两天在网上看一些代码教程,无意中看到了一个简单的图文混排的方法,帖出来与大家分享:

用的是float属性

我们先看看用它作的一个页面效果(如下图):

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(毫米)等


怎么样?简单吗?嘿嘿,这比用表格少了不少的代码^_^喜欢就拿去用吧~~


部分资料参考:洪恩在线



无觅相关文章插件,快速提升流量







  • 关闭引用
  • 评论 (6)
  1. 神啊 终于找到了
    不能复制真是麻烦啊
    不过偶有办法 哈哈dog

      • Ingrid
      • 十月 12th, 2007

      嘿嘿~

  2. 多谢,好好学习一下!

      • 易安
      • 九月 3rd, 2006

      shy不客气,一起学习

    • 蒙巴
    • 九月 1st, 2006

    zan 易安老师果然出手不凡。
    dog学习ing

      • 易安
      • 九月 3rd, 2006

      shyshy啥老师呀,一起学习呗~~

关闭评论!