JS代碼實(shí)現(xiàn)文字環(huán)繞圖片

2012/11/7 20:13:41作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

在Word文檔的制作過(guò)程中經(jīng)常會(huì)遇到圖片和文字都存在的情況，為了版面更合理通常需要特殊的效果，如文字環(huán)繞圖片。本例就學(xué)習(xí)如何使文字環(huán)繞圖片。

【實(shí)例代碼】

 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)-學(xué)無(wú)憂（yzddtk.cn）</title>
</head>
<body>
<div style="background:#EEEEEE;padding:10px;width:240px;">
<img src="logo1.gif" 
  width=100 height=95 id=img1 style="float:right;">
 <div id="mydiv" style="clear:none;">國(guó)家環(huán)?？偩中冀?
起松花江進(jìn)入為期十年的“休養(yǎng)期”，并提出70條具體的治理措施，其中包括
停止審批所有從松花江流域向外流域的調(diào)水工程,逐步淘汰松花江流域鋼鐵、
電力、焦炭、造紙等行業(yè)的落后生產(chǎn)能力。</div>
</body>
</html>
 

 
【運(yùn)行效果】

文字環(huán)繞圖片運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是樣式表中的“clear”：在一個(gè)大容器內(nèi)如果定義了float元素(本例中img圖片定義了float樣式)，那么后面的元素會(huì)與其一起分享大容器剩下的寬度．如果既不想和float一起同行顯示，又不想在瀏覽器中錯(cuò)位，那就得用到”clear：both”取消所有浮動(dòng)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：文字環(huán)繞圖片進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS代碼圖片