Code
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" >3
<head>4
<title>Untitled Page</title>5
<style type = "text/css">
6
.main{}{7
width:200px;8
background:#cccccc;9
}10
.content{}{11
position:relative;12
float:right;13
margin-right:-200px;14
width:200px;15
background:#333333;16
color:#000000;17
color:#ffffff;18
}19
.relative{}{20
float:left;21
width:200px;22
margin-left:-200px;23
background:#dcdcdc;24
position:relative;25
color:#000000; 26
}27
.clear{}{28
clear:both;29
}30
</style>31
</head>32
<body>33
<div class = "main">34
<div class = "content">35
<div class = "relative">使用负边界的元素<br />使用负边界的元素<br />使用负边界的元素<br />使用负边界的元素<br />使用负边界的元素<br /></div>36
<div>这是一个高度自适应的事例；注意元素高度的变化。这是一个高度自适应的事例；注意元素高度的变化。这是一个高度自适应的事例；注意元素高度的变化。</div>37
</div>38
<div class = "clear"></div>39
</div>40
</body>41
</html>
说明：该样式中首先定义main元素宽为200px,背景为浅灰色(#cccccc)。然后定义其中宽为200px的子元素content浮动在右边切右边界为-200px,这样就使得content元素浮动在main元素的右面。然后再在content元素中嵌套子元素relative,使它浮动在content的左边，并且定义左边界为-200px.这样relative就浮动了content元素的左侧。
适用情况：两列中任意一列的高度都不固定。
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
