明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

廣告在文章的中間顯示

發(fā)表時間：2023-05-28 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]我們經(jīng)�？匆姶笳镜膹V告都是放在內(nèi)容中間實現(xiàn)文字環(huán)繞的呢， 一般普通小站廣告只能放在內(nèi)容開頭或者結(jié)尾， 也許大站的cms系統(tǒng)帶這個功能吧， 我們小站常用cms的基本沒這個功能， 因為內(nèi)容標簽里面不可能...

我們經(jīng)常看見大站的廣告都是放在內(nèi)容中間實現(xiàn)文字環(huán)繞的呢， 一般普通小站廣告只能放在內(nèi)容開頭或者結(jié)尾， 也許大站的cms系統(tǒng)帶這個功能吧， 我們小站常用cms的基本沒這個功能， 因為內(nèi)容標簽里面不可能再自動加入一個廣告標簽， 除非你添加文章的時候手動編輯， 那不累死。

我也一直沒想到過用css來控制， 主要是沒想到這個clear屬性， 今天偶然看到一個介紹， 才知道原來實現(xiàn)文字環(huán)繞是如此簡單。

<div class="news">

<div style="float:left;height:300px;width:0">一個寬為0的空白層， 利用該層的高度控制廣告層上下的位置</div>

<div style="float:left;height:250px;width:250px;clear:left;">廣告代碼</div>

</div>

 

關(guān)鍵在于clear:left的作用， clear有3個屬性：clear:both， clear:left， clear:right， 分別表示清除兩邊， 左邊， 右邊的浮動塊。 在廣告層加上clear:left， 那么就表示該層相對于空白層來說不浮動了， 就往下移動了， 太妙了， 哈哈。

我們來比較一下：

<div class="news">

<div style="float:left;height:300px;width:100px;background:#CCC;">給他加上寬度和背景便于觀察效果</div>

<div style="float:left;height:250px;width:250px;">去掉了清除浮動， 你就明白了它的意義</div>

</div>

 

如果再加上這樣一條：

<style>.news img,.news table{clear:both;}</style> //讓內(nèi)容里面的圖片和表格不會遮到廣告

 

很遺憾， 上面的測試發(fā)現(xiàn)只有ie可行， firefox和opera還有不同的結(jié)果， ie的效果是圖片遇到廣告層自動下移， firefox是不會下移， 但是不會遮住廣告層， 因為廣告層在最前， opera是圖片不會下移， 會遮住廣告層， 搞笑啊。

再次改進：

<style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //讓圖片和表格自動處于最底層

 

終于可以了， 比較完美了， 廣告內(nèi)容環(huán)繞的效果就這樣搞定了：）

忘記加上了 <style>.news{float:left;}</style>

 

有人問要文字上右下都環(huán)繞， 我改了一下， 如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>

<html xmlns="http://www.w3.org/1999/xhtml";>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<title>利用css的clear屬性搞定gg廣告文字環(huán)繞</title>

<meta name="keywords" content="css,clear,ggad,文字環(huán)繞" />

<body>

<div style="float:left;">

<div style="float:left;height:200px;width:1px;"><!--一個寬為1px的空白層， 利用該層的高度控制廣告層上下的位置。 寬為0就不能控制上下了， 原因不知道。 --></div>

<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--廣告代碼， firefox和opera還有少量偏差， 需要另外調(diào)整， 就不寫了， 基本可以。 --></div>

<p>新聞內(nèi)容</p>

</div>

</body>

</html>


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。