div inline-block（里面有内容时div溢出）[重复]答案

【问题标题】：div inline-block (div overflows when there's content inside) [duplicate]div inline-block（里面有内容时div溢出）[重复]
【发布时间】：2016-08-18 17:02:33
【问题描述】：

我不知道标题描述的是否正确，但无论如何；在这个jsfiddle 我有一个 div 包含两个内联块 div ..它们对齐没有问题.. 但是每当黄色 div 中有内容时，这个 div 就会奇怪地溢出.. check this out 我想知道这是为什么以及如何解决它

html:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<div class="header">
<div class="logo-container">
    <p class="logo"><span class="seven">7</span>asobate</p>
    <span class="slogan">Web Developer and Data Scraper</span>
  </div><div class="header-nav-container">
 </div>
</div>

css：

*
{
  margin:0;
}
.header
{
  width:100%;
  height:65px;
  background-color:gray;

}
.logo-container
{

  display:inline-block;
  position:relative;
  background-color:green;
  height:65px;
  width:22.5%;
  padding-left:1%;


}
.logo-container .logo
{
  position:absolute;
 font-size:30px;
  font-family: 'Black Ops One';
}
.logo-container .logo .seven 
{
  color:blue;
  font-size:40px;
}
 .logo-container .slogan
{
  position:absolute;
  margin-top:40px;
  font-size:12.5px;
  font-family:'Black Ops One';
}
.header-nav-container
{
  margin-left:70px;
  display:inline-block;
  background-color:yellow;
  height:65px;
  width:10%;
}

（psst .. 你认为将自己称为数据抓取工具完全合法吗？）

【问题讨论】：

标签： css

【解决方案1】：

对不起，我不知道为什么会这样，但解决方案是使用vertical-align: top

.header-nav-container
{
  margin-left:70px;
  display:inline-block;
  background-color:yellow;
  height:65px;
  width:10%;
  vertical-align: top;
}

例如：https://jsfiddle.net/omy1p00y/5/

【讨论】：