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

时间:2017-09-14 04:24:49

标签: html css html5 css3

我这里有一个容器,它有三个子节点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>

3 个答案:

答案 0 :(得分:2)

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

Why is this inline-block element pushed downward?

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:0)

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