内联块的div表现怪异

当内容被添加到一个div，为什么它向下移动，（在图像显示）
当含量添加到所有三个div的，他们变得正常，来到他们的榜首位置

div{ 
 
       background-color:orange; 
 
       height: 200px; 
 
       width: 200px; 
 
       display:inline-block; 
 
      }

<html> 
 
      <head> 
 
       <meta charset="UTF-8" /> 
 
       <title>Document</title> 
 
      </head> 
 
      <body> 
 
       <div class="div1">ankur</div> 
 
       <div class="div2"></div> 
 
       <div class="div1"></div> 
 
       <br> 
 
       <button value="prev">Prev</button> 
 
       <button value="next">Next</button> 
 
      </body> 
 
      </html>

来源

2016-09-26 Ankur Marwaha

尝试垂直aline –

这是重复的，但无法找到 –

只需添加vertical-align:top;到DIV + CSS

div{ 
 
    background-color:orange; 
 
    height: 200px; 
 
    width: 200px; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
}

<html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <div class="div1">ankur</div> 
 
    <div class="div2"></div> 
 
    <div class="div1"></div> 
 
    <br> 
 
    <button value="prev">Prev</button> 
 
    <button value="next">Next</button> 
 
</body> 
 
</html>

来源

2016-09-26 16:25:04 APAD1

这有帮助，但为什么这首先发生？ –

因为'inline-block'元素的默认'vertical-align'值是'baseline'。你可以[在这里阅读更多关于它]（http://christopheraue.net/2014/03/05/vertical-align/）。 – APAD1

默认为内联元素vertical-align值是baseline这是什么原因，你所看到的。当你将文本添加到所有的div时，就会因为这个而对齐。

来源

2016-09-26 16:26:32 j08691

内联块的div表现怪异

回答

相关问题