我这里有一个容器,它有三个子 div,它们是inline-block. 现在,当我在子级中添加一个像 div 或段落这样的子级时,父级 div 会向下推。我已经知道解决方案了。如果我使用属性 vertical-align top 问题就解决了。但我只是想知道是什么原因?
jsfiddle在这里
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;
} Run Code Online (Sandbox Code Playgroud)
<div id='navbar'>
<img id='logo' src="http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png"/> …Run Code Online (Sandbox Code Playgroud)