css+div宽度自适应实例代码

css+div宽度自适应实例代码

1.两列固定宽度的布局：

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

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

css如下：

.left{width:300px;height:300px;backgroud:#DEF0BE;float:left;}

.right{width:300px;height:300px;backgroud#99CC00;float:left;}

2.两列，其中左列宽度固定，右列宽度自适应的布局

css如下：

.left{width:300px;height:300px;backgroud:#DEF0BE;float:left;}

.right{height:300px;backgroud#99CC00;}

总结：对于左列宽度固定，右列宽度自适应的两列式布局，只需要把左列的宽度高度确定，并使用左浮动，而右列只设高度值，不设宽度值和浮动就行了。

3.三列，其中两边的两列宽度固定，中间列宽度自适应的布局

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

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

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

这就要用到绝对定位了，css如下：

.left{width:200px;height:600px;position:absolute;top:0px;left:0px;backgroud:#DEF0BE;}

.right{width:200px;height:600px;position:absolute;top:0px;right:0px;backgroud:#DEF0BE;}

.center{height:600px;margin-left:205px;margin-right:205px;backgroud；#999900；}

总结：对于两边宽度固定，中间宽度自适应的三列式布局，要对两边的两列用绝对定位，设定他们相对浏览器而言的top、left或top、right等的具 体位置。然后对中间列，设置它的margin-left及margin-right值，他们的值刚好是离左列及右列适当位置的值，并且不要设置中间列的宽 度，只要设置中间列的高度就可以了。

4.对于这种最上边

只有一列，并且宽度自适应，下边两列，左侧固定，右侧宽度自适应，布局如下：

<div class="header"></div>

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

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

css部分如下：

.header{width:100%;height:85px;backgroup:#7EB61B;}

.left{width:230px;height:600px;backgroup:#DEF0BE;border:1px solid #99CC00;float:left;}

.right{height:600px;bord:1px solid #99CC00 margin-left:238px;}(.right里加个margin-left是在浏览器左侧238px出开始显示右列