CSS布局之--淘宝双飞翼布局

淘宝的页面布局中，最经典的应该是它的  【子列】  【主列】 【附加列】这三个概念。通过查看淘宝店铺页面的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属性即可实现。