我这里有一个容器,它有三个子节点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>
答案 0 :(得分:2)
我找到了一个非常有用的答案。请参阅以下链接中与您的问题类似的经过验证的解决方案:
答案 1 :(得分:2)
原因是内联块沿其基线垂直对齐。如果内联块元素中有文本,则该文本的* last *行将成为基线。如果内联块为空,则基线(几乎不是完全)位于元素的底部,(小偏移量是g,y,p等字母下降所需的高度 - 这是也是最后一行文本的情况,BTW)。
因此,第一个内联块中的底部文本行与空内联块的“几乎底部”对齐。
为避免这种情况并正确对齐它们(如您所写),您可以将vertical-align: top
应用于所有内联块。
答案 2 :(得分:0)
除非另有设定,否则孩子的基线是其父母的基线。 p
的基线将位于#container
的底部,因为内联块元素的默认垂直对齐。因此,文本从container
的底部开始。