文字環繞圖片的佈局效果

時間 2019-12-05

標籤文字環繞圖片佈局效果简体版

原文原文鏈接

CSS的float屬性，有left，right。javascript

那麼，若是我想讓圖片浮在中間呢？有沒有float:middle呢？css

貌似是沒有勒。html

最新的CSS3的分欄屬性（http://www.w3.org/TR/css3-multicol/）可讓文字分欄，而後再讓圖片左浮右浮，以此來實現圖片在中間的「假象」。java

如何實現「文字環繞圖片」的霸道效果呢？！！（雖然感受很2，沒有哪一個UI設計師會這樣設計一個網頁。可是以爲這種排版好有趣哦~）jquery

答案就是，用動態div啦~css3

把文字分紅4塊，環繞着圖片。圖片的大小和div的大小事先規定。再用js來計算每一個div裏顯示多少文字。web

這樣，即便只有左浮右浮，也能夠實現文字環繞圖片的效果啦~ui

效果：url

所有源代碼：spa

<!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

感謝小蚊子，王偉同窗~~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。