Question

质疑

将内容添加到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>

Answer 1

只需将vertical-align:top;添加到div CSS

即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

内联元素的默认vertical-align值为baseline，这是导致您所看到的内容的原因。当您向所有div添加文本时，它们会因此而对齐。

内容块div在添加内容时表现得很奇怪

2 个答案: