DIV+CSS：網(wǎng)頁一行兩列背景自適應(yīng)

網(wǎng)頁布局中常有的一種情況就是網(wǎng)頁主體部分分成一行兩列；而在很多種情況下，設(shè)計(jì)師們常把左右兩列的背景色設(shè)計(jì)成不同色彩，以實(shí)現(xiàn)內(nèi)容塊的明顯區(qū)分；但這樣的設(shè)計(jì)給布局提出了一個(gè)看似簡(jiǎn)單，而實(shí)現(xiàn)非常難的問題；那就是左右兩列怎么樣實(shí)現(xiàn)背景高度自適應(yīng)，及左邊內(nèi)容高于右邊時(shí)，右邊背景色也要和左邊一樣；右邊內(nèi)容高于左邊時(shí)，左邊背景色也要和右邊一樣；

當(dāng)年為了實(shí)現(xiàn)這個(gè)，我在網(wǎng)上查過無數(shù)的文章，都沒有很好的解決方案；多數(shù)人用很大的負(fù)數(shù)實(shí)現(xiàn)，也有人用javascript實(shí)現(xiàn)； 后來因?yàn)楦杏X這樣實(shí)現(xiàn)不合理，所以我一直用表格來實(shí)現(xiàn)； 因?yàn)檫@樣最簡(jiǎn)單； 但今天同事問起我這個(gè)問題，我中午仔細(xì)想了想；想出了一個(gè)解決辦法，寫出來和大家分享；

基本原則：

1、布局要合理，不能為了實(shí)現(xiàn)這樣的效果而使html的代碼變得臃腫； 2、CSS部分也要簡(jiǎn)單巧妙實(shí)現(xiàn)，不能為了這樣的效果而寫大量的代碼；而主要的還是瀏覽器兼容方面要沒有問題；

以下是我實(shí)現(xiàn)的代碼，說明一下，這樣的布局還不是很理想；但這已是我暫時(shí)能想到的最好解決辦法了；

實(shí)現(xiàn)方法一：左邊用邊框，右邊用背景色；

這個(gè)方法是左邊用200PX的邊框來實(shí)現(xiàn)一列的背景，再用這個(gè)標(biāo)簽的實(shí)際背景色來實(shí)現(xiàn)另一列的背景，這樣左右永遠(yuǎn)都是一樣高的； 程序代碼

<div id="box"> <div id="right">right <br /> right</div> <div id="left">left</div> <div style="clear:both"></div> </div>

程序代碼

<style> /*這一行可能不用看，是廢話，為了好看一點(diǎn)*/ *{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;} /*最外邊的一個(gè)盒子，左邊框200PX，有背景色*/ #box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;} /*讓左邊的一列向左移動(dòng)200PX*/ #left{margin-left:-200px; width:200px; position:static;} /*由于IE和FIREFOX有區(qū)別，所以對(duì)IE加了一行作處理*/ * html #left{position:fixed;} /*右邊的寬度，這里我為什么沒有寫700PX；說實(shí)話，我實(shí)在沒有想明白；這里最多只能寫900-200-2=698PX；但這在使用過程中，并不會(huì)有影響；*/ #right{float:right; width:695px;} </style>

演示效果：

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

方法一存在一個(gè)問題：就是如果左邊的背景是一張圖怎么辦？對(duì)，如果是純色，那么沒有問題；如果是一張圖，就沒有辦法了；所以我寫了第二種解決辦法； 實(shí)現(xiàn)方法二：用嵌套實(shí)現(xiàn)兩列背景；這個(gè)方法我個(gè)人推薦使用；

程序代碼

<div id="box"> <div id="content"> <div id="right">right <br />right</div> <div id="left">left</div> </div> </div>

CSS部分我不用解釋了吧！

程序代碼

<style> *{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;} #box{ background:#FFFF66;width:700px; padding-left:200px; float:left;} #content{ background: #FF6600; float:left;} #right{ width:695px; float:right;} #left{ width:200px; margin-left:-200px; position:static; float:left;} * html #left{position:fixed;} </style>

演示效果：

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)站欄目：DIV+CSS：網(wǎng)頁一行兩列背景自適應(yīng)
URL地址：http://bm7419.com/news40/324090.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、營銷型網(wǎng)站建設(shè)、、微信公眾號(hào)、全網(wǎng)營銷推廣、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)