淘寶的頁面布局中，最經典的應該是它的 【子列】 【主列】 【附加列】這三個概念。通過查看淘寶店鋪頁面的DOM結構及其CSS可以發現：淘寶使用的左中右三列布局采用的方式與我們平常有很大差別。一般我們是下面這種做法：
<div class="sub">子列</div> <div class="main">主列</div> <div class="extra">附加列</div>
然后，對於sub main extra 分別設置寬度為190 550 190及float:left，並調好邊距。這種做法，我相信會一點CSS的都已經知道了。它的特點是：頁面在被瀏覽器解析時，按照子 主 附加的順序進行加載。
如果仔細看淘寶店鋪的DOM結構發現，淘寶在DOM中是按主列 子列 擴展列的順序書寫的，此時網頁被瀏覽器解析時，按照主 子 附加的順序進行加載 —— 也就是我們常說的”重要的內容先加載”。這種結構會更好一些。它的結構大概如下：
<div class="grid-s5m0e5"> <div class="col-main">我是主列</div> <div class="col-sub">我是子列</div>
<div class="col-extra">我是附加列</div> </div>
以上DOM，grid-s5m0e5是一個布局框，然后其中分包含了col-main col-sub col-extra，即主列 子列 附加列三欄，它們分別所占的位置是頁面的“左 中 右”部分。現在的問題是“在不改變DOM結構的情況下如何讓col-main展示在中間呢？”。接下來，輪到CSS上場了。。。
.grid-s5m0e5 { width:100%;} .grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; } .col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; } .col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }
下面逐行分析一下：
第1行.grid-s5m0e5 是一個布局框的名稱，我們為其定義了寬度100%（在IE6一不定義100%時，有點小問題，親們自己可以一試）
第2行.col-main 【主列】：浮動左側，寬度100%（寬度全讓它給占了，左右兩側的層該怎么辦？）
第3行.col-sub 【子列】：浮動左側，寬度190，左邊界為-100%（此處是關鍵：浮動情況下，負邊界值會導致DIV上移，而使用-100%可以確實它移動到最左側。）
第4行.col-extra 【附加列】：左浮動，寬度190，左邊界為-190px（道理同上，注意的是，負左邊界一定要大於或等於該DIV的寬度，才能靠到上一行去）
能過上面的CSS設置之后，網頁的呈現基本上已經是【子】【主】【附加】的排列了。貌似完成了，可是別高興得太早，，，DOM中有一個“我是主列”的文字怎么沒有了？再次經過DOM的分析發現，原來被.col-sub給擋住了。那么，現在的問題是：【子列】【附加列】的位置對了，但是【主列】會被子列和附加列給擋住，如何正確的給【主列】定位呢？下面是淘寶的做法：
1、DOM結構的改變：在.col-main下再次添加一個 .main-wrap【這就是淘寶的布局中col-main下有一個main-wrap，而col-sub下卻沒有sub-wrap的原因，我猜的^_^】
2、利用CSS調整.main-wrap的位置。【這里很簡單，就是把左右被擋住的部分，設置為main-wrap的左 右邊界即可】
經過以上兩步驟后，DOM結構如下：
<div class="grid-s5m0e5"> <div class="col-main"> <div class="main-wrap"> 我是主列，出來吧！ </div> </div> <div class="col-sub">我是子列</div> <div class="col-extra">我是附加列</div> </div>
CSS如下：
.grid-s5m0e5 { width:100%; margin-right:auto; margin-left:auto; } .grid-s5m0e5 .col-main { float:left; width:100%; min-height:30px; background:#000; } .grid-s5m0e5 .col-main .main-wrap { margin-left:200px; /*與col-sub產生10像素距離*/ margin-right:200px; /*與col-extra產生10像素距離*/ background:#0f0; min-height:30px; } .col-sub { float:left; width:190px; min-height:30px; background:#f00; margin-left:-100%; } .col-extra { float:left; width:190px; min-height:30px; background:#00f; margin-left:-190px; }
那么它最終實現的是一個怎樣的布局呢？—— 左右190，中間自動伸縮並與左右保持10個像素的距離。
這種布局的好處
之一是：可以實現主要的內容先加載的優化；
那么第二個好處是：兼容目前所有的主流瀏覽器，包括IE6在內哦。
第三個好處是：不同的布局框，可以通過調整.col-sub、.col-extra、.col-main、.col-main .main-wrap的相關CSS屬性即可實現。