DIV+CSS左右列高度自适应问题
来源:互联网 发布:关键字排名优化工具 编辑:程序博客网 时间:2024/05/21 21:42
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法。
欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]
下面给出最终的效果图:
具体代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>
<style type="text/css">
.main{500px;overflow:hidden;}
.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}
.right{width:400px;background-color:#F00;float:left;}
</style>
</head>
<body>
<div class="main">
<div class="left">左侧内容1</div>
<div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS左右两列自适应高度的方法-HTMer</title>
<style type="text/css">
.main{500px;overflow:hidden;}
.left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}
.right{width:400px;background-color:#F00;float:left;}
</style>
</head>
<body>
<div class="main">
<div class="left">左侧内容1</div>
<div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>
</div>
</body>
</html>
说明:其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。
欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]
- DIV+CSS左右列高度自适应问题
- DIV+CSS左右列高度自适应问题
- DIV+CSS左右两列自适应高度
- DIV+CSS左右两列自适应高度的方法
- div+css左右高度自适应
- div自适应高度--左右一直
- 左右两个div高度自适应
- div css高度自适应
- div+css自适应高度
- div+css自适应高度
- DIV+CSS 三行二列居中高度自适应布局
- js控制三列高度自适应DIV+CSS页面
- js控制三列高度自适应DIV+CSS页面
- js控制三列高度自适应DIV+CSS页面
- 三行二列居中高度自适应布局DIV+CSS
- 经典DIV+CSS案例--两列高度自适应
- 三列DIV高度自适应
- CSS DIV自适应高度布局
- VS2008 "当前不会命中断点。源代码与原始版本不同"解决方法
- Pear-DB在CentOS下的安装
- W39V080FA
- freemarker乱码问题
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景
- DIV+CSS左右列高度自适应问题
- 芯片IDT7205L12PDG (IDT) 9bit FIFO
- 芯片H8S/2117 (NEC) 16位单片机
- sina weibo架构与关系存储
- AD1886
- 二、策略模式
- XP下超级终端的配置
- jQuery对话框组件artDialog
- 解决gb2312页面调用utf-8页面的js,显示乱码!