html - 行高导致div不均匀

Question

我希望两个 div 并排放置并在底部对齐。我有一个按钮，当我在其上设置 line-height 时，它会稍微下降。我将展示一个带有图像的示例。

我想要的:

发生了什么:

下面的codepen展示了drop:

http://codepen.io/basickarl/pen/KVXqxR?editors=110

html:

<div class="div1">
  hello<br>
  hello<br>
  hello<br>
  hello<br>
  hello<br>
  hello<br>
</div>
<div class="div2">
  <button class="butt">push meh</button>
</div>

CSS:

.div1 {
  display: inline-block;
  background: red;
}
.div2 {
  display: inline-block;
  background: lime;
}
.butt {
  line-height: 40px;
  background: lightblue;
}

我知道按钮中的文本是对齐的，并且 line-height 在它周围产生了一种气泡。有什么方法可以让它们对齐？

Answer 1

将 vertical-align:bottom 添加到 .div2(和/或 .div1):

.div2 {
  display: inline-block;
  background: lime;
  vertical-align:bottom;
}

codepen example

内联元素的默认垂直对齐方式是基线，这就是您所看到的。