<!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=utf-8" />
<title>左右均能适应的布局</title>
<style type="text/css">
.main{
width:200px;
background:#C6F;
}/*定义父元素的CSS样式*/
.content1{
position:relative;
float:right;
margin-right:-200px;
width:200px;
background:#C60;
color:#ffffff;
}/*定义子元素1的CSS样式*/
.content2{
float:left;
width:200px;
margin-left:-200px;
background:#C6F;
position:relative;
color:#CCC;
border:0 #C6F solid;
}/*定义子元素2的CSS样式*/
.clear{
clear:both;}
/*使用清除浮动的元素*/
</style>
</head>
<body>
<div class="main">
<div class="content1">
<div class="content2">
使用负边界元素的部分<br/>使用负边界元素的部分<br/>使用负边界元素的部分<br/>使用负边界元素的部分<br/>左边增加部分<br/>左边增加部分<br/>左边增加部分<br/>左边增加部分<br/>左边增加部分<br/>左边增加部分<br/>
</div>
<div>
这是一个高度自适应的示例,注意元素高度的变化。 理解这个自适应 的 具体含义<br/>
</div></div>
<div class="clear"></div></div>
<!--/*说明:该样式中首先定义了main元素,宽度为200px 。 然后定义了main的子元素Content1浮动在右面,而且右边界为-200px,这样使得content1元素浮动在main的右面。 再定义了content1的子元素content2让他嵌套在content1中并且浮动在content1
的左边,同样定义左边界为-200px,这样就使它浮动在cotent1的左边。这样做的目的是让content2完全覆盖掉main,而且Content2和main元素的背景色一样。*/-->
</body>
</html>
1.左边适应右边高度变化
2.右边适应左边高度变化