CSS標(biāo)準(zhǔn)系列解決背景不能延伸的問題_Web標(biāo)準(zhǔn)教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
假如我們的網(wǎng)站排版方式是縱向的,比如兩列、三列(當(dāng)然還可以更多)。這樣的排版我們就會用到 float 例:排成三列的格局。代碼如下:
示例代碼 [hl5o.cn]
<div ="content">
<div id="main">
<div id="maincol"></div>
<div id="xcol"></div>
</div>
<div id="subcol"></div>
</div>
<div id="main">
<div id="maincol"></div>
<div id="xcol"></div>
</div>
<div id="subcol"></div>
</div>
這里我們打算把subcol放在左側(cè),maincol放在中間,xcol放在右側(cè)。CSS的寫法如下:
示例代碼 [hl5o.cn]
#content{width:700px; background:url(img/bg.png)repeat-y;}
#subcol {float:left; width:200px;}
#main {width:500px; float:right;}
#maincol {width:300px;float:left;}
#xcol {width:200px; float:right;}
#subcol {float:left; width:200px;}
#main {width:500px; float:right;}
#maincol {width:300px;float:left;}
#xcol {width:200px; float:right;}
似乎這樣就沒問題了!但是事實上我們可以發(fā)現(xiàn)背景卻沒有伸展的意思,這是因為背景的自適應(yīng)高度并不繼續(xù)float的高度,如何解決這個問題呢?如下分析:
背景會繼續(xù)float底線所在容器中的位置高度,所以背景一定會找到最后一個標(biāo)簽去測定,這樣我們在所有的float下方下如下的標(biāo)簽:
<div style="clear:both;"></div>
這個標(biāo)簽中什么也不放。也就是一個沒有高度的空容器,這樣它就可以把背影拉下來了。
事實上在實際操作中還是會有很多問題會出現(xiàn),這就需要我們以冷靜的頭腦去分析與解決了!
相關(guān)Web標(biāo)準(zhǔn)教程:
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語:開始標(biāo)準(zhǔn)之路
- 相關(guān)鏈接:
- 教程說明:
Web標(biāo)準(zhǔn)教程-CSS標(biāo)準(zhǔn)系列解決背景不能延伸的問題
。