文字環繞圖片的布局效果(使用動態div實現)

2024-07-11 08:28:46

字體：大中小

來源：轉載

供稿：網友

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://www.survivalescaperooms.com/uploads/allimg/190321/1I6035G5-1.jpg"></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>

上一篇：基于ime-mode屬性使用詳解

下一篇：favicon.ico在ie下面無法正常顯示(尺寸32*32)

發表評論

共有條評論