建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

文字环绕图片的布局效果

更新时间:2016-12-31整理编辑:建站学习网阅读:0

 

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

 

全部源代码: 

复制代码代码如下: 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
<title>文字环绕图片</title> 
<style> 
html,body{ 
line-height:20px; 

.img{ 
background:url("http://a4.att.hudong.com/00/27/01300000164784121809279645121.jpg"); 
width:300px; 
height:200px; 
position:absolute; 
left:270px; 
top:210px; 
/* border:1px solid #ccc;*/ 

.m1{ 
width:840px; 
height:200px; 
overflow:hidden; 

.m2{ 
width:260px; 
height:230px; 
position:absolute; 
left:0px; 
top:200px; 
overflow:hidden; 

.m3{ 
width:260px; 
height:230px; 
position:absolute; 
left:580px; 
top:200px; 

.m4{ 
position:absolute; 
left:0px; 
top:422px; 
width:840px; 
height:200px 

.lbl{ 
width:840px; 
position:relative; 
clear:both; 

.c{ 
display:none; 

p{ 
padding:0px; 
margin:0px; 

</style> 
</head> 
<div class="lbl clearx"> 
<div class="m1 clearx"></div> 
<div class="m2 clearx"></div> 
<div class="m3 clearx"></div> 
<div class="m4 clearx"></div> 
<div class="img"></div> 
</div> 
<div class="c"> 
在1815年,正值拿破仑被流放厄尔巴岛时,一个既年轻又成功的商船水手爱德蒙·唐泰斯,在船长利克莱尔濒死的时刻接受了船长指挥权,并回到了家乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,一个拿破仑的支持者,吩咐唐泰斯运送两样物品,一个是给予位于厄尔巴岛上的马歇尔·伯特兰德的包裹,一个是从厄尔巴岛上寄出给予一位居住于巴黎的神秘男子的信件。这封神秘信件使唐泰斯两位妒忌他的朋友,在另一位朋友的建议下指控唐泰斯叛国。马赛的首席检察官韦尔福,虽然平时为人正直,开始时也同情唐泰斯,但看到信件的神秘收信人是他父亲后,未经调查便判决唐泰斯终身监禁于海上的孤岛监狱伊夫堡,并且于同时烟灭了作为证据的信件。在他被囚在伊夫堡的十四年中,他与亚伯·法利亚成为了朋友,一名声称拥有大量财宝并试图挖地道逃狱的老囚犯。法利亚将一生所学教授于唐泰斯,并在死前将藏于基督山的财宝告知于唐泰斯。1829年,法利亚死去后,唐泰斯便装扮法利亚的尸体逃离了伊夫堡,并被一艘走私船给救起,在跟走私犯一起工作数个月后,他来到了基督山,他佯装成受伤的模样,并说服走私犯暂时将他置于基督山,趁著这段时间前往财宝的藏置处。在找到了财宝之后,唐泰斯回到了故乡马赛,得知了自己的父亲贫穷潦倒而死;他建造了一艘船,将剩余的财宝藏在船上,接着向塔斯卡尼政府收购基督山及伯爵的头衔。回到了马赛,唐泰斯便开始计划他的复仇,但在那之前,他帮助了一些在他入狱前帮助过他的人。在1815年,正值拿破仑被流放厄尔巴岛时,一个既年轻又成功的商船水手爱德蒙·唐泰斯,在船长利克莱尔濒死的时刻接受了船长指挥权,并回到了家乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,一个拿破仑的支持者,吩咐唐泰斯运送两样物品,一个是给予位于厄尔巴岛上的马歇尔·伯特兰德的包裹,一个是从厄尔巴岛上寄出给予一位居住于巴黎的神秘男子的信件。这封神秘信件使唐泰斯两位妒忌他的朋友,在另一位朋友的建议下指控唐泰斯叛国。马赛的首席检察官韦尔福,虽然平时为人正直,开始时也同情唐泰斯,但看到信件的神秘收信人是他父亲后,未经调查便判决唐泰斯终身监禁于海上的孤岛监狱伊夫堡,并且于同时烟灭了作为证据的信件。在他被囚在伊夫堡的十四年中,他与亚伯·法利亚成为了朋友,一名声称拥有大量财宝并试图挖地道逃狱的老囚犯。法利亚将一生所学教授于唐泰斯,并在死前将藏于基督山的财宝告知于唐泰斯。1829年,法利亚死去后,唐泰斯便装扮法利亚的尸体逃离了伊夫堡,并被一艘走私船给救起,在跟走私犯一起工作数个月后,他来到了基督山,他佯装成受伤的模样,并说服走私犯暂时将他置于基督山,趁著这段时间前往财宝的藏置处。在找到了财宝之后,唐泰斯回到了故乡马赛,得知了自己的父亲贫穷潦倒而死;他建造了一艘船,将剩余的财宝藏在船上,接着向塔斯卡尼政府收购基督山及伯爵的头衔。回到了马赛,唐泰斯便开始计划他的复仇,但在那之前,他帮助了一些在他入狱前帮助过他的人。 
</div> 
<body> 
</body> 
<script type="text/javascript"> 
var c = $(".c").html(); 
var length = 5 
for(var k = 1; k < length; k++){ 
c = set(c,k,length - 1 == k); 

function set(value,index,flg){ 
var val = ""; 
var v = null; 
var element = $(".m" + index); 
element.html("<p>" + value + "</p>"); 
var element2 = element.find("p"); 
if(flg){ 
return""; 

while(element.height() < element2.height()){ 
v = element2.html(); 
v = v.substring(0,v.length - 1); 
element2.html(v); 

val = value.replace(new RegExp("^" + v),""); 
return val; 

</script> 
</html> 

本文网址:https://www.dedexuexi.com/divcss/jc/1747.html

文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

  • 支付宝打赏
    微信打赏
IE6定义1px左右高度的容器示例代码
« 上一篇2016年12月31日
CSS应用基础教程:基本认识
2016年12月31日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content