您的位置：首页 > 其它

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

2013-05-27 16:13 996 查看

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>

还有一个有趣的分栏设计，CSS3实现的：http://ued.ctrip.com/blog/wp-content/webkitcss/demo/column.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航