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

时间:2016-02-25 08:25:05

标签: html css

以下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。 enter image description here

为什么显示效果不是这个?

enter image description here

因为200 = 400-200,100 = 300-200,50 = 250-200 ??

margin-bottom:-200px;在这里意味着什么? 请绘制照片以详细解释原理。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

那是因为&#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}