Question

以下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;在这里意味着什么？请绘制照片以详细解释原理。

Answer 1

因为您在#wrap div上分配了一个隐藏的溢出，并且您将div标签高度的负边距放在p标签上。以下是codepen的示例。 codepen.io/elelowwaydi/pen/grYgYa?editors=1100。

Answer 2

那是因为＆＃34;包装＆＃34;在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}

为什么负边距底部使列等于高度？

2 个答案: