反過(guò)來(lái)也可以：左側(cè)寬度固定，右側(cè)自適應(yīng)。不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。

這種布局比較常見(jiàn)，博客園很多默認(rèn)主題就是這種。一般情況下，這種布局中寬度固定的區(qū)域是側(cè)邊欄，而自適應(yīng)的區(qū)域是主體內(nèi)容區(qū)——相信把側(cè)邊欄搞成自適應(yīng)的人很少吧？

要實(shí)現(xiàn)這種布局，也算比較簡(jiǎn)單。我們先給出html結(jié)構(gòu)：

<div id="wrap">  <div id="sidebar" style="height:240px;">固定寬度區(qū)</div>  <div id="content" style="height:340px;">自適應(yīng)區(qū)</div></div><div id="footer">后面的一個(gè)DIV，以確保前面的定位不會(huì)導(dǎo)致后面的變形</div>

代碼中的#wrap的div，是用來(lái)包裹我們要定位的這兩個(gè)區(qū)的；他后面還有個(gè)#footer，用來(lái)測(cè)試在前面的定位搞定后會(huì)不會(huì)導(dǎo)致后面的div錯(cuò)位——如果錯(cuò)位了，那證明我們的定位方法必須改進(jìn)。

下面列舉幾個(gè)常見(jiàn)的方法：

1，固定寬度區(qū)浮動(dòng)，自適應(yīng)區(qū)不設(shè)寬度而設(shè)置 margin

我們拿右邊定寬左邊自適應(yīng)來(lái)做示范,CSS代碼如下：

#wrap {    overflow: hidden; *zoom: 1;  }  #content ,#sidebar {    background-color: #eee;   }  #sidebar {    float: right; width: 300px;  }  #content {    margin-right: 310px;  }  #footer {background-color: #f00;color:#fff; margin-top: 1em}

其中，sidebar讓他浮動(dòng)，并設(shè)置了一個(gè)寬度；而content沒(méi)有設(shè)置寬度。

大家要注意html中必須使用div標(biāo)簽，不要妄圖使用什么p標(biāo)簽來(lái)達(dá)到目的。因?yàn)閐iv有個(gè)默認(rèn)屬性，即如果不設(shè)置寬度，那他會(huì)自動(dòng)填滿他的父標(biāo)簽的寬度。這里的content就是例子。

當(dāng)然我們不能讓他填滿了，填滿了他就不能和sidebar保持同一行了。我們給他設(shè)置一個(gè)margin。由于sidebar在右邊，所以我們?cè)O(shè)置content的margin-right值，值比sidebar的寬度大一點(diǎn)點(diǎn)——以便區(qū)分他們的范圍。例子中是310.

假設(shè)content的默認(rèn)寬度是100%，那么他設(shè)置了margin后，他的寬度就變成了100%-310，此時(shí)content發(fā)現(xiàn)自己的寬度可以與sidebar擠在同一行了，于是他就上來(lái)了。

而寬度100%是相對(duì)于他的父標(biāo)簽來(lái)的，如果我們改變了他父標(biāo)簽的寬度，那content的寬度也就會(huì)變——比如我們把瀏覽器窗口縮小，那wrap的寬度就會(huì)變小，而content的寬度也就變小——但，他的實(shí)際寬度100%-310始終是不會(huì)變的。

這個(gè)方法看起來(lái)很完美，只要我們記得清除浮動(dòng)(這里我用了最簡(jiǎn)單的方法)，那footer也不會(huì)錯(cuò)位。而且無(wú)論content和sidebar誰(shuí)更長(zhǎng)，都不會(huì)對(duì)布局造成影響.

但實(shí)際上這個(gè)方法有個(gè)很老火的限制——html中sidebar必須在content之前！

但我需要sidebar在content之后！因?yàn)槲业腸ontent里面才是網(wǎng)頁(yè)的主要內(nèi)容，我不想主要內(nèi)容反而排在次要內(nèi)容后面。

但如果sidebar在content之后，那上面的一切都會(huì)化為泡影。

可能有的人不理解，說(shuō)你干嘛非要sidebar在后面呢？這個(gè)問(wèn)題說(shuō)來(lái)話長(zhǎng)，反正問(wèn)題就是——content必須在sidebar之前，但content寬度要自適應(yīng)，怎么辦？

下面有兩個(gè)辦法，不過(guò)我們先把html結(jié)構(gòu)改成我們想要的樣子：

<div id="wrap">  <div id="content" style="height:340px;">自適應(yīng)區(qū)，在前面</div>  <div id="sidebar" style="height:240px;">固定寬度區(qū)</div></div>

2，固定寬度區(qū)使用絕對(duì)定位，自適應(yīng)區(qū)照例設(shè)置margin

我們把sidebar扔掉，只對(duì)content設(shè)置margin，那么我們會(huì)發(fā)現(xiàn)content的寬度就已經(jīng)變成自適應(yīng)了——于是content對(duì)sidebar說(shuō)，我的寬度，與你無(wú)關(guān)。

content很容易就搞定了，此時(shí)來(lái)看看sidebar，他迫不得已拋棄了float。我們來(lái)看看sidebar的特點(diǎn)：在右邊，寬度300，他的定位對(duì)content不影響——很明顯，一個(gè)絕對(duì)主義分子誕生了。

于是我們的css如下：

#wrap {    *zoom: 1; position: relative;  }  #sidebar {    width: 300px; position: absolute; right: 0; top: 0;  }  #content {    margin-right: 310px;  }

這段css中要注意給wrap加上了相對(duì)定位，以免sidebar太絕對(duì)了跑到整個(gè)網(wǎng)頁(yè)的右上角而不是wrap的右上角。

好像完成了？在沒(méi)有看footer的表現(xiàn)時(shí)，我很欣慰。我們來(lái)把sidebar加長(zhǎng)——增長(zhǎng)100px！不要一年，只要一條內(nèi)褲！哦，，，只要一句代碼。

但是，footer怎么還是在那兒呢？怎么沒(méi)有自動(dòng)往下走呢？footer說(shuō)——我不給絕對(duì)主義者讓位！

其實(shí)這與footer無(wú)關(guān)，而是因?yàn)閣rap對(duì)sidebar的無(wú)視造成的——你再長(zhǎng)，我還是沒(méi)感覺(jué)。

看來(lái)這種定位方式只能滿足sidebar自己，但對(duì)他的兄弟們卻毫無(wú)益處。

3，float與margin齊上陣

經(jīng)過(guò)前面的教訓(xùn)，我們重新確立了這個(gè)自適應(yīng)寬度布局必須要達(dá)成的條件：

• sidebar寬度固定，content寬度自適應(yīng)
• content要在sidebar之前
• 后面的元素要能正常定位，不能受影響

由于絕對(duì)定位會(huì)讓其他元素?zé)o視他的存在，所以絕對(duì)定位的方式必須拋棄。

如果content和sidebar一樣，都用float，那content的自適應(yīng)寬度就沒(méi)戲了;如果不給content加float，那sidebar又會(huì)跑到下一行去。

所以，最終我決定：float與margin都用。

我打算把content的寬度設(shè)為100%,然后設(shè)置float:left，最后把他向左移動(dòng)310，以便于sidebar能擠上來(lái)。

但這么一來(lái)content里面的內(nèi)容也會(huì)跟著左移310，導(dǎo)致被遮住了，所以我們要把他重新擠出來(lái)。為了好擠，我用了一個(gè)額外的div包裹住內(nèi)容，所以html結(jié)構(gòu)變成了這種樣子：

<div id="wrap">  <div id="content" style="height:140px;">    <div id="contentb">      content自適應(yīng)區(qū)，在前面    </div>  </div>  <div id="sidebar" style="height:240px;">sidebar固定寬度區(qū)</div></div>

css則變成這樣：

#sidebar {    width: 300px; float: right;  }  #content {    margin-left: -310px; float: left; width: 100%;  }  #contentb {    margin-left: 310px;  }

這樣一改，真正的“content”就變成了contentb，他的寬度跟以前的content一樣，是100%-310.

大家可能注意到了代碼中的兩個(gè)margin-left，一個(gè)-310px一個(gè)310px，最后結(jié)合起來(lái)相當(dāng)于什么都沒(méi)干，著實(shí)蛋疼。但他確實(shí)解決了content與sidebar的順序問(wèn)題。

這個(gè)方法的缺點(diǎn)就是：太怪異，以及額外多了一層div。

4，標(biāo)準(zhǔn)瀏覽器的方法

當(dāng)然，以不折騰人為標(biāo)準(zhǔn)的w3c標(biāo)準(zhǔn)早就為我們提供了制作這種自適應(yīng)寬度的標(biāo)準(zhǔn)方法。那就簡(jiǎn)單了：把wrap設(shè)為display:table并指定寬度100%,然后把content+sidebar設(shè)為display:table-cell;然后只給sidebar指定一個(gè)寬度，那么content的寬度就變成自適應(yīng)了。

代碼很少，而且不會(huì)有額外標(biāo)簽。不過(guò)這是IE7都無(wú)效的方法。

———————割尾巴————————-

如果不考慮ie7及以下版本，則使用標(biāo)準(zhǔn)方法；如果不在意sidebar與content的順序，則用第一種方法；否則用第3種方法。

以上代碼都沒(méi)在IE6測(cè)試，有問(wèn)題不負(fù)責(zé)解釋。個(gè)人覺(jué)得，讓IE6壽終正寢的辦法就是——從此不再理他。