Html 引导相等列高度（使用底部垂直对齐图像）

链接到实时版本：

我有一组部分，我想使用底部属性垂直对齐图像。但是，当前柱的高度不同。当我尝试将height:100%属性添加到所有父标记时，图像的大小会放大并溢出该部分。任何帮助都将不胜感激

谢谢

HTML

全局CSS

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 


}

.bannerRow h2 {
font-family: "chantilly-light", sans-serif;
letter-spacing: 1px;
text-align: center;
font-size: 24px;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
}

.bannerRow h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 49px;
letter-spacing: 5px;
color: #345e91;
}

.sectionContainer {
margin-top: 20px;
}

.section h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 40px;
letter-spacing: 8px;
color: #000000;
}

.section h2 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 24px;
padding-bottom: 20px;
letter-spacing: 3px;
color: #000000;
}

.mobileOnly {
display:none;
}

---

在测试页面上做了一些实验，得到了一个足够的css专用解决方案。将要垂直与底部对齐的.col-*类设置为以下css：

  float: none;
  display: inline-block;
  vertical-align: bottom;

然后将父行设置为

display:table

以弥补内联块创建的额外填充，并且它应该正确对齐。对于一些更复杂的行，它仍然需要进行一些精细处理，但似乎效果良好。

可能重复的

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 


}

.bannerRow h2 {
font-family: "chantilly-light", sans-serif;
letter-spacing: 1px;
text-align: center;
font-size: 24px;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
}

.bannerRow h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 49px;
letter-spacing: 5px;
color: #345e91;
}

.sectionContainer {
margin-top: 20px;
}

.section h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 40px;
letter-spacing: 8px;
color: #000000;
}

.section h2 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 24px;
padding-bottom: 20px;
letter-spacing: 3px;
color: #000000;
}

.mobileOnly {
display:none;
}

  float: none;
  display: inline-block;
  vertical-align: bottom;