爲什麼負邊緣底部使列高度相等？

下面的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;這是什麼意思？
請畫一張照片來詳細解釋原理。

來源

2016-02-25 it_is_a_literature

負邊距的效果將上移以下靜態元件。你想獲得什麼可以用一個負邊界頂部 – fcalderan

爲什麼三個colmuns高度不是200 = 400-200,100 = 300-200,50 = 250-200？負邊界底部會移動下面的靜態元素，在這裏移動平均值減去？ –

因爲您在#wrap div上分配了一個隱藏溢出，並且您將負邊距放在div標籤的高度上，而不是在p標籤上。 –

因爲您在#wrap div上分配了一個隱藏溢出，並且您將負邊距放在div標籤的高度上，而不是在p標籤上。以下是codepen的示例。 codepen.io/elelowwaydi/pen/grYgYa?editors=1100。

來源

2016-02-25 08:34:21

這是因爲在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}

來源

2016-02-25 08:34:51 ThrowingDwarf

爲什麼負邊緣底部使列高度相等？

回答

相關問題