在上一篇《Web布局連載——兩欄固定布局（四）》中留了一個下文，“No div, no float, no clear, no hack”。看起來很有意思，這種沒有div，沒有float，沒有清除浮動和沒有hack的布局，還是看到的少數，當然除了 table布局。因為table布局是不需要使用前面說的幾個部分。那么今天我們要講的布局是不是table布局呢？欲想知道，那就一起隨著往下看吧。

首先今天這個布局的思路是來自于sneak peek的《No div, no float, no clear, no hack*, no joke!》一文。雖然整個頁面看到不到table的有關標簽，但是其布局的原理卻是和table一模一樣。那么我們實現如下所示的效果，究竟要怎么來寫呢？

既然原理是來自于表格，那么表格的結構，我想不用我在這里多說，大家應該都知道，如果您不知道，那加緊補習一下html中的表格標簽相關應用。表格用于布局，最大的時候是整個頁面都是table，而且table里還有table，層層關系是那個復雜呀，頭痛。可今天要說的，我們只是運用table的原理來布局，而且只是運用在分欄部分。具體的我們來看：

HTML結構

<div id="wp"><div id="hd">Header</div><div id="bd">Body<div id="doc"><div id="s1">sidebar content</div><div id="s2">main content</div></div></div><div id="ft">Footer</div> </div>

上面的結構其實很類似于前面幾篇文章介紹的布局結構，只是在兩個方面不一樣，其一是類名換了；其二是頁面主內容的結構更深層了。為了幫助大家更好的理解這個結構，我簡單的說一下他們各起的作用：

div#wp是整個頁面的容器;類似于div#wrapper

div#hd是整個頁面的頭部容器，類似于div#header

div#bd是整個頁面的主體部分，類似于div#body；其主要包含了邊欄和主內容兩個部分，當然有時還有其他欄；

div#doc是整個頁面主體的列包容器；

div#s1和div#s2是頁面布局中的列；類似于div#sidebar和div#main-content

div#ft是整個頁面的腳部容器，類似于div#footer

其中最為關鍵的是div#bd在這里相當于table，div#doc在這里相當于表格的行table-row，而div#s1和div#相當于表格的單元格table-cell。可是上面有div，開頭不用div等布局，因此sneak peek將整個div布局換成了列表嵌套的形式，但用div也不會影響整個布局效果。接下來看看修改后的結構：

<ol id="wp"><li id="hd"><div class="container"><h2>Header content</h2> </div></li><li id="bd"><ol id="doc"><li id="s1"><div class="container"><h2>Sidebar Content</h2></div></li><li id="s2"><div class="container"><h2>Main Content</h2></div></li></ol></li><li id="ft"><div class="container"><h2>Footer Content</h2></div></li> </ol>

初一看覺得理解不透，我也沒整明白為什么要用列表，不過我建議使用div會更易理解。我們也不糾結于結構用什么樣的標簽，接下來看布局樣式的實現：

CSS Code

* {margin: 0;padding: 0; } body {font-family: 'Amarante', cursive;background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;text-align: center; /*IE6下讓元素居中*/ } /*==========================================================*\** Layout* #wp = wrapper 整個容器* #hd = header 頭部* #bd = body 主體容器* #ft = footer 腳部* #doc = document 主體* #s1,#s2 = column 列* \*==========================================================*/ #wp {width: 960px;/*頁面寬度*/margin: 0 auto; /*水平居中*/list-style-type: none;/*去掉列表默認類型符號*/text-align: left;/*重置文本左對齊*/ } #bd {display: table;/*表格顯示*/table-layout: fixed;/*這個很重要*/border-collapse: separate; } /*在ie6下詞內換行*/ *html #bd {word-wrap: break-word; } #doc {display: table-row;/*表格行顯示*/ } #s1,#s2 {display: table-cell;/*表格單元格顯示*/ } /*ie6-7下不支持display:table-cell，因此換成下面的代碼*/ #s1,#s2,{/*注意選擇器后面的逗號不能丟，這個非常重要，不然ie6下無效果*/display:inline;zoom:1;vertical-align:top;position: relative;margin-top: -20px;overflow-x:hidden; } #s1 {width: 220px;/*側欄寬度*/ } #s2 {width: 720px;/*主內容寬度*/padding-left: 20px;/*因為這個是單元格表現形式，所以不能使用margin-left來控制兩列的間距，需要使用padding*/ } /*兼容mac下的IE低版本寫法*/ /*\*//*/#s1,#s2 {display:inline-block;float: left;} #ft {clear:both; } /**//*裝飾樣式*/ #hd {padding-bottom: 10px; } #bd {padding-bottom: 10px; } #hd .container{background-color: #b1b1b1;color: #fff; } #s1 .container{background-color: #E7DBD5; } #s2 .container{background-color: #F2F2E6; } #doc .container {min-height: 200px;height: auto !important;height: 200px; } #ft .container{background-color: #b1b1b1;color: #fff; }

這樣一來我們就使用列表（你也可以使用其他的標簽）制作了一個類似于表格功能的布局效果，

上面的案例是側欄在左邊，主內容在右邊，如果要制作一個側欄在右邊，主內容在左邊，只需要根據需要將div#s1和#div#s2的寬度值進行一定的轉換即可。

這種布局方法經過測試，可以兼容所有瀏覽器。雖然說no div, no float, no clear, no hack。其實還是多少使用到了hack技巧，如果不使用，在IE6、7下是無法實現這樣的布局效果。這種方法其實也是制作等高兩欄布局的一個好方法，當然這種方法也只限于兩欄布局，你可以在div#doc內添加更多的列div#s3,div#s4...之類，只是前提條件，他們的寬度與列與列之間的間距總各不能大于div#wrap的寬度。

轉載于:https://www.cnblogs.com/jennifer900522/archive/2012/10/31/2748319.html

總結

以上是生活随笔為你收集整理的Web布局连载——两栏固定布局（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。