Question

我这里有一个容器，它有三个子节点inline-block。现在当我在子节点中添加一个像div或者段落的子节点时，父div会向下推。我已经知道了解决方案。如果我使用属性vertical-align top，问题就解决了。但我很想知道是什么原因？ jsfiddle here

body{ 
  margin:0
}
#navbar {
  width:100%;
  background-color:black;
  height:50px;
  padding: 0 150px 0 150px;
  position:relitive;
}
#logo {
  height:60px;
  width:90px;
}
#container {
  background-color:#E6E6E6;
  width:78%;
  margin: auto;
  height:1000px;
  text-align:center;
}
#navTable { 
  color:white;
  position:absolute;
  top:10px;
  left:300px;  
  font-size:1.5em;
}
#navTable td {
  padding:0 10px 0 10px;
  border-right:1px solid white;
}
#container>div {
  width:32%;
  height:100%;
  border:1px solid black;
  display:inline-block;

}

.content { 
  background-color:yellow;
  height:300px;
}

<div id='navbar'>
  <img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/>
  <table id='navTable'>
      <tr>   
        <td>Home</td> 
        <td>News</td> 
        <td>Money</td> 
        <td>Entertainment</td> 
        <td>Travel</td>   
      </tr>
  </table>
</div>

<div id='container'>
  <div id='leftDiv'>
    <p>HHHHHH</p>
  </div>

 <div id='middleDiv'></div>
 <div id='rightDiv'></div>
</div>

Answer 1

我找到了一个非常有用的答案。请参阅以下链接中与您的问题类似的经过验证的解决方案：

Why is this inline-block element pushed downward?

Answer 2

原因是内联块沿其基线垂直对齐。如果内联块元素中有文本，则该文本的* last *行将成为基线。如果内联块为空，则基线（几乎不是完全）位于元素的底部，（小偏移量是g，y，p等字母下降所需的高度 - 这是也是最后一行文本的情况，BTW）。

因此，第一个内联块中的底部文本行与空内联块的“几乎底部”对齐。

为避免这种情况并正确对齐它们（如您所写），您可以将vertical-align: top应用于所有内联块。

Answer 3

除非另有设定，否则孩子的基线是其父母的基线。 p的基线将位于#container的底部，因为内联块元素的默认垂直对齐。因此，文本从container的底部开始。

如果在其中添加子div，则向下推内联块div

3 个答案: