几种自适应布局方法

　　<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之后。 

 

转载于:https://www.cnblogs.com/qianphong/p/10381149.html