Question

我不知道标题是否正确描述但无论如何; 在这个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 ..你认为将自己称为数据刮刀是完全合法的吗？）

Answer 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/

div inline-block（内部有内容时div溢出）

1 个答案: