当前位置:首页 > Css

经典的DIV+CSS图文混排

happyfhb18年前 (2009-05-21)Css3768
摘要:其实这是很老的方法了。写出来只是给新手看 。高手就不要笑话我了。呵呵。下面是代码和演示效果。图文混排 左浮动<div style="width:400px; height:400px; padding:5px; background-color:#CFF;word-wrap:brea…

其实这是很老的方法了。写出来只是给新手看 。

高手就不要笑话我了。呵呵。下面是代码和演示效果。

图文混排 左浮动

<div style="width:400px; height:400px; padding:5px; background-color:#CFF;word-wrap:break-word; position:relative;">
<div style="float:left; height:120px; width:120px; padding:5px; background-color:#CCC;">右浮动注意,浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。</div>
海滨博客是一个发布自己想法的个人平台,同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解,海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。
</div>

左浮动注意,浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。
海滨博客是一个发布自己想法的个人平台,同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解,海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。

 

图文混排 右浮动

 <div style="width:400px; height:400px; padding:5px; background-color:#CFF;word-wrap:break-word; position:relative;">
<div style="float:right; height:120px; width:120px; padding:5px; background-color:#CCC;">右浮动注意,浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。</div>
海滨博客是一个发布自己想法的个人平台,同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解,海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。
</div>

 

右浮动注意,浮动的DIV层应该放在前面。浮动顺序调节 float 就可以了。
海滨博客是一个发布自己想法的个人平台,同时为大家提供精品的软件下载。希望大家经常来海滨的博客看看。每次来都会发现新的东西哦。呵呵。另外我喜欢结交很多计算机专业的好朋友。欢迎留言。欢迎大家对本博客提出自己的见解,海滨愿意和大家一起沟通。共同发展。大家的支持是我前进的动力。嘿嘿。祝大家工作顺利。万事如意。

 

扫描二维码推送至手机访问。

版权声明:本文由海海日记-冯海滨博客发布,如需转载请注明出处。

本文链接:http://www.fenghaibin.com/?id=194

“经典的DIV+CSS图文混排” 的相关文章

css实现中英文双语导航菜单

 双语菜单一般在中英双版的企业站会经常用到,而绝大部分都是用图片来实现,这里和大家分享用纯CSS实现的中英双语导航菜单!代码请看: function trestart() { if(script) { clear = confirm("你真的确定要清除代码吗?"); i…

升级到IE8 还是坚持IE7?

       IE8用户越来越多,我一直在使用IE7,觉得还不错,因为目前不是很习惯火狐,所以一直用着以IE7为内核的世界之窗浏览器。我到底该不该升级到IE8呢?我一向都是用最新版的软件的,这问题还真的不好决定。  &n…

您需要了解的DIVCSS网页布局的8条面试题目

CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。今天52CSS.com收集了常见的8条面试题目,希望对您有所帮助。一、超链接点击过后hover样式就不出现的问题?被点击访问过的超链接样式不再具有hover和active样式了,解决方法是改变CSS属性的排列顺…

CSS/DIV网页设计视频教程

 CSS基础知识与核心概念CSS初探 - CSS基本知识 - 第1课CSS基本语法与核心概念 - CSS基本知识 - 第2课设置丰富的文字效果 - CSS基本知识 - 第…

鼠标放上去点击图片

鼠标放上去点击图片

 鼠标放上去点击图片.rar 非常好的css样式。…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。