幾種自適應布局方法

　　<div class="left"></div>

　　<div class="right"></div>

左側固定寬度，右側自適應布局

1、左側使用float浮動，給固定寬度，右側設置margin-left：

　　.left{float:left;width:300px;background:#F00;}

　　.right{margin-left:300px;background:#00F;}

2、左側使用絕對定位absolute；固定寬度，右側設置margin-left：

　　.left{position:absolute;left:0;width:300px;background:#F00;}

　　.right{margin-left:300px;background:#00F;}

3、左側使用絕對定位，固定寬度，右側也使用絕對定位(父級給相對定位)：

　　.left{position:absolute;left:0;width:300px;background:#F00;}

　　.right:{position:absolute;left:300px;background:#00F;}

左側自適應，右側固定寬度

1、左側用左浮動，margin-right為負值，值為右邊距==右側層的寬度的負值（左撐開，距離右側的距離不錯層）， 右側的右浮動，固定寬度：

　　.left{float:left;width:100%;margin-right:-300px;background:#F00;}

　　.right{float:right;width:300px;background:#00F;}

2、左側右側都使用固定定位，右側固定寬度（父級設置相對定位）：

　　.left{position:absolute;right:300px;width:auto;background:#F00;}

　　.rigth{position:absolute;right:0;width:300px;background:#00F;}

 

三列布局

　　<div class="center"></div>

　　<div class="left"></div>

　　<div class="right"></div>

首先為這三列都設置浮動：

　　.center,.left,.right{float:left;height:500px;}

同時為它們指定寬度：

　　.left{width:300px;background:#F00;}

　　.right{width:400px;background:#0F0;}

　　.center{width:100%;background:#00F;}

現在我們要讓left在左邊，相當於就是讓它覆蓋在center的上面，所以我們只需要left添加：

　　.left{margin-left:-100%;}

同時要讓right在右邊可以這樣設置：

　　.right{margin-left:-400px;}

注意，此時的Margin的值的絕對值應與right的寬度值相同。

這里我們為什么要把center放置在left與right之前呢？這個其實涉及元素的堆疊順序的知識，由於我們三處都設置了浮動，所以從某種意義上講它們三個就是在同一個平面的（相當於z-index相同），那么，這里就不能根據CSS來判斷堆疊順序了。所以此處的HTML結構就決定了它們的堆疊順序：后來者居上。我們要想讓left在center之上就需要把left放置在center之后。