手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >文字环绕图片的布局效果
文字环绕图片的布局效果
摘要:CSS的float属性,有left,right。那么,如果我想让图片浮在中间呢?有没有float:middle呢?貌似是没有勒。最新的CSS...

 

CSS的float属性,有left,right。 
那么,如果我想让图片浮在中间呢?有没有float:middle呢? 
貌似是没有勒。 
最新的CSS3的分栏属性(http://www.w3.org/TR/css3-multicol/)可以让文字分栏,然后再让图片左浮右浮,以此来实现图片在中间的“假象”。 
如何实现“文字环绕图片”的霸道效果呢?!!(虽然感觉很2,没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~) 
答案就是,用动态div啦~ 
把文字分成4块,环绕着图片。图片的大小和div的大小事先规定。再用js来计算每个div里显示多少文字。 
这样,即使只有左浮右浮,也可以实现文字环绕图片的效果啦~ 
效果: 

【文字环绕图片的布局效果】相关文章:

文字环绕图片的布局效果(使用动态div实现)

CSS等比列放大缩小效果

css实现文字的自动隐藏

CSS控制背景图像平铺实现边框阴影效果

css中input标签与图片按钮对不齐怎么办

CSS常用样式效果

css实现文字层浮在图片之上示例代码

CSS文章列表切换选项卡效果实例

纯CSS结合DIV实现的右侧底部简洁悬浮效果

DIV下图片自适应解决方法

精品推荐
分类导航