用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>

转载于:https://www.cnblogs.com/chinapcc/archive/2007/02/07/643803.html

用CSS实现HTML图文混排相关推荐

CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属 ...
CSS 3之图文混排效果
图文混排效果 1. 设置图片与文字间距 2. 文字环绕效果 1. 设置图片与文字间距用 padding 属性能设计图片和文字之间的距离,即文字与图片之间在一定间距: padding 属性主要用来在一 ...
python 输出结果图文混排_div css图文混排列表设计中的基础问题总结
最近业务需要,想设计一个比较通用的图文混排的列表.结果设计的过程中遇到了不少问题,虽然都是一些css设计中比较基础的问题,但是自己认为有必要总结下,希望可以帮到一些css设计的初学者,同时也想扩大下自 ...
html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
1. 首行缩进你知道的,从小学,老师就教我们,段落的开头应该空两格.而你使用word的时候,也有首行缩进这个功能,但在html中你的空格键好像起不了作用了.当然,你可以用来代替一个空格,但这不是理 ...
03-CSS操作--CSS操作规范（书写技巧）+通栏布局+标签的注意事项+三大类标签+边距合并问题+图文混排+图像签名+水平居中+垂直居中
一.CSS操作规范 1.CSS书写技巧 (1)最外层是一个<div id="bigDiv">,将所有元素都包进去 (2)去除<body>的外边距(body{ ...
css控制图文混排、图文自适应容器显示的效果
闲来无聊,写了一个css控制图文混排.图文自适应容器显示的效果. 下面js,是鼠标拖动div缩放大小的代码, 跟样式无关,目的是展示自适应效果. 留存参考: <!DOCTYPE html /&g ...
css制作竖向图文列表,上下结构的图文混排CSS列表.pdf
上下结构的图文混排CSS列表天我们共同学习一款经常能用到的图文混排CSS 列表"的制作.首先从分析一下此列表的特点,然后编写HTML 代码,最终应用CSS 样式实现最终的效果.在52C ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...
前端代码：html、css（图文混排）文字环绕 - 案例篇
前端代码(含图文混排)文字环绕.demo代码.效果图具体效果,请拷贝源码至本地运行查看.(不再赘述!) 效果图 · 截图: 案例代码 · 如下: <!DOCTYPE html> < ...

用CSS实现HTML图文混排

用CSS实现HTML图文混排相关推荐

最新文章

热门文章