线高导致不均匀的div

Question

我希望两个div坐在一起并在底部对齐。我有一个按钮，当我设置行高时，它会略微下降。我将展示一个带图像的例子。

我想要的是什么：

发生了什么：

以下代码集显示了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;
}

我知道按钮中的文字是对齐的，并且行高会在它周围创建一种气泡。无论如何都有任何方法让它们对齐吗？

Answer 1

将vertical-align:bottom添加到.div2（和/或.div1）：

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

<强> codepen example

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