最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS技巧:解决div列高度自适的2种常用方法
时间:2008-01-26 编辑:简简单单 来源:一聚教程网
解决div列高度自适的方法有很多种,这里介绍2种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。
1、利用“clear:both”背景填充(推荐!!!)
这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题。三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px。
CSS代码:
代码如下 | 复制代码 |
#main{ width: 780px; margin: 0; background: url(bg.gif) #FFFFFF repeat-y left; text-align: left; } #divleft{ float: left; width: 240px; } #divright{ float: right; width: 540px; } .clear{ border-top:1px solid transparent !important; margin-top:-1px !important; border-top:0; margin-top:0; clear:both; visibility:hidden; } html代码: |
优点:无hacks,完全的自适应高度。
2、脚本控制高度
在
代码如下 | 复制代码 |
优点:代码超级简单
缺点:要确定有某一列的高度始终是相对最高的,此方法比较被动。
-
上一个: 网页实例:用CSS制作带有样式的网页按钮
相关文章
- 解决css中父div高度不随子div高度变化的方法 04-18
- CSS等比列放大缩小效果(宽度和高度) 03-22
- ie6不支持css max-heigth 最大高度解决办法集 03-02
- css 容器高度100%及相对高宽 06-10
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31