css+div宽度自适应实例代码
2012-08-01 17:37
459 查看
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出开始显示右列
相关文章推荐
- css+div宽度自适应实例代码
- 独行DIV自适应宽度布局CSS实例与应用范围
- css div自适应宽度实例
- DIV+CSS高度自适应方法网页代码实例
- CSS 实现div宽度根据内容自适应
- html css div自适应屏幕宽度,高度
- css三列布局,中间div固定,两侧div宽度自适应
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- div + css宽度自适应(液态布局)
- css 水平居中,垂直居中,自适应宽度的代码
- CSS+DIV布局,一个列宽影响另一个列宽,使总宽度自适应(CSS+DIV Layout, one column's width depend on the other's)
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- css+div三列宽度自适应
- CSS实现自适应宽度的菜单按钮效果代码
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- DIV+CSS实现两边固定宽度,中间自适应宽度
- css三列布局,左边两个div固定,最右边宽度自适应
- CSS实现绿色带阴影自适应宽度的菜单代码
- css控制div下图片自适应解决方法:图片不超过最大宽度
- iOS 中根据屏幕宽度自适应分布按钮的实例代码