标签：
实现水平列表的底部对齐有许多种方式:
1、用inline-block+vertical-align
2、用table-cell+vetical-align
3、用flex方式
此外，还可以用变形、绝对定位方式，但是用变形和绝对定位方式太过于复杂。
这里还是只介绍前三种方式，其中前两种的唯一区别就是第二种用了display:table-cell。
HTML代码部分：
<body> <div class="parent"> <div id="child1" class="child">1</div> <div id="child2" class="child">2</div> <div id="child3" class="child">3</div> <div id="child4" class="child">4</div> </div> </body>
各方案的公共CSS部分：
/* 设置模拟高度 */ .parent{width: 600px; height: 400px;} .parent{border: 5px dashed red; /* 设置边框，便于观察 */ } #child1{width: 25%; height: 80%; background-color: #0D6798;} #child2{width: 25%; height: 60%; background-color: #98050C;} #child3{width: 25%; height: 40%; background-color: #149818;} #child4{width: 25%; height: 20%; background-color: #169999;}
第1种：inline-block + vertical-align
注意上面的vertical-align属性是作用在子元素上，而不是在父元素上。因为行内元素是水平排列的，而父元素只能设置他们在水平方向上的对齐方式。
这时你会发现虽然子元素之间对齐了，但是相对于父元素还是没有底部对齐。这个可以通过下面的table-cell方案来解决。
第2种：table-cell + vetical-align
/* 方案2：table-cell */ .parent{font-size: 0; -webkit-text-size-adjust: none; } /*消除将非inline-block元素强制转成inline-block导致的间隙问题 */ .parent{display: table-cell; vertical-align: bottom;} /*加了table-cell的最大好处就是可以在父元素上设置子元素在垂直方向上的排列 */ .child{display: inline-block;vertical-align: bottom;}
这个例子与上个例子的最大区别就是加了display:table-cell属性，加了这个属性之后，子元素就像表格中的单元格一样，自然也可以在父元素上使用vertical-align属性对子元素进行垂直方向上的对齐方式设定了。父元素上的vertical-bottom是子元素整体对于父元素的对齐方式、子元素上的vertical-align是子元素之间的对齐方式。这样也就解决了第一个方案中存在的缺陷：
第3种：flex
/* 方案3：flex */ .parent{display: flex; align-items: flex-end;}
align-items属性表示辅轴方向对齐方式为从下到上。
本文转载自：网易前端微专业讨论区，陈裕荣编写，本人做了修改和完善
水平列表的底部对齐方式的探讨（1、用inline-block+vertical-align 2、用table-cell+vetical-align 3、用flex方式）
标签：
原文地址：http://www.cnblogs.com/Hellowor1d/p/4674249.html
