是否看見大站的廣告都是放在內容中間實現文字環繞的呢,一般普通小站廣告只能放在內容開頭或結尾,也許大站的cms系統帶這個功能吧,我們小站常用cms的基本沒這個功能,因為內容標籤裡面不可能再自動加入一個廣告標籤,除非你加入文章的時候手動編輯,那就不累死。
我也一直沒想到用css來控制,主要是沒想到這個clear屬性,今天偶然看到一個介紹,才知道原來實現文字環繞是如此簡單。
程式碼範例:
一個寬為0的空白層,利用該層的高度控制廣告層上下的位置
廣告代碼
關鍵在於clear:left的作用,clear有3個屬性:clear:both,clear:left,clear:right,分別表示清除兩邊,左邊,右邊的浮動塊。在廣告層加上clear:left,那就表示該層相對於空白層來說不浮動了,就往下移動了,太妙了,哈哈。
我們來比較一下:
為他加上寬度和背景便於觀察效果
去掉了清除浮動,你就明白了它的意義
如果再加上這樣一條:
很遺憾,上面的測試發現只有ie可行,firefox和opera還有不同的結果,ie的效果是圖片遇到廣告層自動下移,firefox是不會下移,但是不會遮住廣告層,因為廣告層在最前,opera是圖片不會下移,會遮住廣告層,搞笑。
再次改進:
終於可以了,比較完美了,廣告內容環繞的效果就這樣搞定了:)
//2008-02-29,修改by:何為
忘記加上了
有人問要文字上右下都環繞,我改了一下,如下:
新聞內容
|