本文分享了一种HTML页面的自适应双栏布局方法，通过特定的CSS样式实现了左右两栏随内容变化而自动调整高度的功能，兼容IE6、7、8及火狐等浏览器。
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
HTML页面分两栏，左右栏个自适应相邻的高度(兼容IE6.7.8.火狐)。（左栏的高度增加，右栏自动增加高度。右栏高度增加，左栏自动增加高度）
直接看代码：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HTML页面分两栏，左右栏个自适应相邻的高度(兼容各浏览器) </title>
<style type="text/css">
<!--
.clear{clear:both;width:0px;height:0px;overflow:hidden;}
.w{ width:960px; margin:0px auto; background-color:#0F91CF;position:relative; overflow: hidden; }
.w .l-r{ width:960px; background-color:#F00; position:relative;right:300px; }
.w .l-r.l{width:650px;padding-right:10px;float:left;position:relative;left:300px;}
.w .l-r.r{width:300px;float:left;position:relative;left:300px;}
-->
</style>
</head>
<body>
<div class="w">
<div class="l-r">
<div class="l">
1<br />1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br />
</div>
<div class="r">
2<br />2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br />
</div>
<divclass="clear"></div>
</div>
</div>
</body>
</html>
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
