DIV+CSS左右两列自适应高度的方法

来源:互联网 发布:高达00 知乎 编辑:程序博客网 时间:2024/05/22 14:20

<!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>

    说明:其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。

原创文章:http://www.blogbus.com/ada-life-logs/231591213.html
0 1
原创粉丝点击