下面的css可以使所有三列相等的高度，我想知道为什么吗？
<html>
<style>
body,p{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1200px;
margin:0 auto;
}
#left,#center,#right {
margin-bottom:-200px;
}
#left {
float:left;
width:300px;
background:#777;
}
#center {
float:left;
width:300px;
background:red;
}
#right {
float:left;
width:300px;
background:green;
}
p {color:#FFF;text-align:center}
</style>
<body>
<div id="wrap">
<div id="left">
<p style="height:250px">style="height:250px"</p>
</div>
<div id="center">
<p style="height:300px">style="height:300px"</p>
</div>
<div id="right">
<p style="height:400px">style="height:400px"</p>
</div>
</div>
</body>
</html>
所有列的高度均为200px。
为什么显示的效果不是这个？
因为那200 = 400-200，100 = 300-200,50 = 250-200？
margin-bottom:-200px;在这里是什么意思？请画一张照片详细说明原理。
最佳答案
嗯，这是因为CSS中的“包装”类。
我做了一个jsfiddle here。
我所做的唯一更改就是删除了溢出元素。
HTML（未更改）：
<body>
<div id="wrap">
<div id="left">
<p style="height:250px">style="height:250px"</p>
</div>
<div id="center">
<p style="height:300px">style="height:300px"</p>
</div>
<div id="right">
<p style="height:400px">style="height:400px"</p>
</div>
</div>
</body>
CSS：
body,p{
margin:0;
padding:0;
}
#wrap{
width:1200px;
margin:0 auto;
}
#left,#center,#right {
margin-bottom:-200px;
}
#left {
float:left;
width:300px;
background:#777;
}
#center {
float:left;
width:300px;
background:red;
}
#right {
float:left;
width:300px;
background:green;
}
#right2 {
float:left;
width:300px;
background:blue;
}
p {color:#FFF;text-align:center}
关于html - 为什么负底边使列相等的高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35621953/