用CSS实现HTML图文混排

在网页中经常需要文字环绕图片，或文字与图片分开来排列，目前常用的方法是使用表格来定位文字和图片以此来实现 。但对于动态的网页，图文混排的格式并不是一成不变的所以要想动态的生成表格来实现图文混排是非常困难的。

    在CSS中有二个的属性可以用来实现图文混排。而且可以相对比较方便的实与动态内容相联系，在此我做以简单简绍：

1. float　设定浮动性质（多用于文绕图的情形）

支　持：ＩＥ４、ＮＣ４
适　用：区块元素或图形
可能值： left 元素靠左，文字围绕其右 right 元素靠右，文字围绕其左 none 以预设的方法显示预设值：none
继承性：无

一般范例：DIV { float : right }
同轴范例：<DIV style="float:right">
2.clear　设定清除性质（设定是否允许浮动元素之存在）
支　持：ＩＥ４
适　用：区块元素或图形
可能值： both 若两边有浮动元素，则该元素移至浮动元素下方 left 若左边有浮动元素，则该元素移至浮动元素下方 right 若右边有浮动元素，则该元素移至浮动元素下方 none 以预设的方法显示预设值：none
继承性：无

一般范例：DIV { clear : right }
同轴范例：<DIV style="clear:right">

利用上述二个CSS属性我们可以很方便的实现文字环绕图片的功能。
左环绕：<div style="float:left; clear: both;" align="center"><img src=200461813238884.jpg width="600" height="400" alt="1234"><br/>
图像标题</div>
右环绕：<div style="float:right; clear: both;" align="center"><img src="20.gif" width="176" height="141"><br/>
图像标题</div>
独占一行：<div style="float:none; clear: both;" align="center"><img src="v8game2.jpg" width="400" height="300"><br/>
图像标题</div>


http://www.cnblogs.com/chinapcc/archive/2007/02/07/643803.html

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: