文本围绕照片的合理布局实际效果(应用动态性

日期:2021-01-20 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

CSS的float特性,有left,right。
那末,假如我想让照片浮在正中间呢?有木有float:middle呢?
貌似是沒有勒。
全新的CSS3的分栏特性(http://www.w3.org/TR/css3-multicol/)可让文本分栏,随后再让照片左浮右浮,以此来完成照片在正中间的“假象”。
怎样完成“文本围绕照片”的蛮横霸道实际效果呢?!!(尽管觉得很2,沒有哪一个UI设计方案师会这样设计方案1个网页页面。可是感觉这类排版好趣味哦~)
回答便是,用动态性div啦~
把文本分为4块,围绕着照片。照片的尺寸和div的尺寸事前要求。再用js来测算每一个div里显示信息是多少文本。
这样,即便仅有左浮右浮,还可以完成文本围绕照片的实际效果啦~
实际效果:
 
所有源码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<script type="text/javascript" src="http://code.jquery.com/jquery⑴.10.0.min.js"></script>
<title>文本围绕照片</title>
<style>
html,body{
line-height:20px;
}
.img{
background:url("http://a4.att.hudong.com/00/27/0845121.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年,恰逢拿破仑被放逐厄尔巴岛时,1个既年青又取得成功的商船海员爱德蒙·唐泰斯,在船长利克莱尔濒死的時刻接纳了船长指挥权,并返回了故乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,1个拿破仑的适用者,嘱咐唐泰斯运输两样物件,1个是给予坐落于厄尔巴岛上的马歇尔·伯特兰德的包裹,1个是从厄尔巴岛上寄出给予1位定居于巴黎的神密小伙的信函。这封神密信函使唐泰斯两位嫉妒他的盆友,在另外一位盆友的提议下控告唐泰斯叛国。马赛的首席检察官韦尔福,尽管平常为人刚正不阿,刚开始时也怜悯唐泰斯,但看到信函的神密收信人是他父亲后,未经调研便裁定唐泰斯终生囚禁于水上的孤岛牢房伊夫堡,而且于另外烟灭了做为直接证据的信函。在他被囚在伊夫堡的104年中,他与亚伯·法利亚变成了盆友,1名宣称有着很多金银财宝并尝试挖正宗逃狱的老犯人。法利亚将1生所学专家教授于唐泰斯,并在死前将藏于基督山的金银财宝告之于唐泰斯。1829年,法利亚死去后,唐泰斯便打扮法利亚的遗体逃出了伊夫堡,并被1艘走私货船给救起,在跟走私货犯1起工作中数个月后,他来到了基督山,他佯装成负伤的样子,并说动走私货犯临时将他置于基督山,趁著这段時间前往金银财宝的藏置处。在寻找了金银财宝以后,唐泰斯返回了家乡马赛,获知了自身的父亲贫困落魄而死;他修建了1艘船,将剩下的金银财宝藏在船上,接着向塔斯卡尼政府部门回收基督山及伯爵的称号。返回了马赛,唐泰斯便刚开始方案他的报仇,但在那以前,他协助了1些在他坐牢前协助过他的人。在1815年,恰逢拿破仑被放逐厄尔巴岛时,1个既年青又取得成功的商船海员爱德蒙·唐泰斯,在船长利克莱尔濒死的時刻接纳了船长指挥权,并返回了故乡马赛迎娶他的未婚妻美蒂丝。利克莱尔,1个拿破仑的适用者,嘱咐唐泰斯运输两样物件,1个是给予坐落于厄尔巴岛上的马歇尔·伯特兰德的包裹,1个是从厄尔巴岛上寄出给予1位定居于巴黎的神密小伙的信函。这封神密信函使唐泰斯两位嫉妒他的盆友,在另外一位盆友的提议下控告唐泰斯叛国。马赛的首席检察官韦尔福,尽管平常为人刚正不阿,刚开始时也怜悯唐泰斯,但看到信函的神密收信人是他父亲后,未经调研便裁定唐泰斯终生囚禁于水上的孤岛牢房伊夫堡,而且于另外烟灭了做为直接证据的信函。在他被囚在伊夫堡的104年中,他与亚伯·法利亚变成了盆友,1名宣称有着很多金银财宝并尝试挖正宗逃狱的老犯人。法利亚将1生所学专家教授于唐泰斯,并在死前将藏于基督山的金银财宝告之于唐泰斯。1829年,法利亚死去后,唐泰斯便打扮法利亚的遗体逃出了伊夫堡,并被1艘走私货船给救起,在跟走私货犯1起工作中数个月后,他来到了基督山,他佯装成负伤的样子,并说动走私货犯临时将他置于基督山,趁著这段時间前往金银财宝的藏置处。在寻找了金银财宝以后,唐泰斯返回了家乡马赛,获知了自身的父亲贫困落魄而死;他修建了1艘船,将剩下的金银财宝藏在船上,接着向塔斯卡尼政府部门回收基督山及伯爵的称号。返回了马赛,唐泰斯便刚开始方案他的报仇,但在那以前,他协助了1些在他坐牢前协助过他的人。
</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>

也有1个趣味的分栏设计方案,CSS3完成的:http://ued.ctrip.com/blog/wp-content/webkitcss/demo/column.html