DIV+CSS左右列高度自适应问题
来源:互联网 发布:改图软件app 编辑:程序博客网 时间:2024/05/22 03:03
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法。
下面给出最终的效果图:
具体代码如下所示:
<!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;即可。
0 0
- 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自适应高度布局
- 1001. A+B Format (20)
- 多阶矩在图像中的含义(方差,偏度,峰度)
- SQL性能优化
- OkHttp使用教程记录
- 属性动画,补间动画,帧动画
- DIV+CSS左右列高度自适应问题
- linux运维工程师的基本要求
- QT中的setAttribute()用法
- 安卓使用第三方jar包电脑编译通过但是运行出错
- sql server 统计各省份人数前几名和其他
- IoC--Inversion of Contro and DI---Dependency Injection(Spring)
- 代码行统计工具(C#)
- Java 编程思想 写一个程序,打印出从命令行获取的三个自变量。
- Harmonic Number(暴力求解法)