两侧高度相互适应的CSS+div布局

<!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.左边适应右边高度变化
两侧高度相互适应的CSS+div布局_第1张图片

2.右边适应左边高度变化

两侧高度相互适应的CSS+div布局_第2张图片

 

你可能感兴趣的:(css,css,css,div布局,两侧相互适应,浏览器兼容性良好)