首先HTML如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css"> body{ background-color: #eee; }
#wrap{
width: 600px;
margin: 50px auto;
background-color: #eee;
overflow: hidden; /*为了产生BFC*/
}
#left{
width: 273px;
float: left;
padding: 10px;
background-color: white;
}
#right{
width: 273px;
float: right;
padding: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">我在左边，我比右边短一点。我在左边，我比右边短一点。我在左边，我比右边短一点。</div>
<div id="right">我在右边，我比左边长一点。我在右边，我比左边长一点。我在右边，我比左边长一点。我在右边，我比左边长一点。我在右边，我比左边长一点。我在右边，我比左边长一点。</div>
</div>
</body>
</html>
效果如下：
那么，怎样才能使这两列一样高呢？
1.负边距
<style type="text/css">
body{
background-color: #eee;
}
#wrap{
width: 600px;
margin: 50px auto;
background-color: #eee;
overflow: hidden; /*为了产生BFC*/
}
#left{
width: 273px;
float: left;
padding: 10px;
background-color: white;
padding-bottom: 9999px; /*配合包含div的overflow: hidden，实现等高*/
margin-bottom: -9999px;
}
#right{
width: 273px;
float: right;
padding: 10px;
background-color: #ccc;
}
</style>
效果如下：
时间： 2024-11-05 18:54:44