html – 行高导致不均匀的div

概述我想两个div坐在一起,并在底部对齐.我有一个按钮,当我设置行高时,它会略微下降.我将展示一个带图像的例子. 我想要的是： 怎么了： 以下codepen显示了drop： http://codepen.io/basickarl/pen/KVXqxR?editors=110 HTML： <div class="div1"> hello<br> hello<br> hello<br> h 我想两个div坐在一起,并在底部对齐.我有一个按钮,当我设置行高时,它会略微下降.我将展示一个带图像的例子.

我想要的是：

怎么了：

以下codepen显示了drop：

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

HTML：

<div >  hello<br>  hello<br>  hello<br>  hello<br>  hello<br>  hello<br></div><div >  <button >push meh</button></div>

CSS：

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

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

解决方法 将vertical-align：bottom添加到.div2(和/或.div1)：

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

codepen example

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

总结

以上是内存溢出为你收集整理的html – 行高导致不均匀的div全部内容，希望文章能够帮你解决html – 行高导致不均匀的div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。