实现水平列表的底部对齐有许多种方式:
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
- /* 方案1：inline-block+vertical-align */
- .parent{font-size: 0; -webkit-text-size-adjust: none; } /* 消除将非inline-block元素强制转成inline-block导致的间隙问题 */
- .child{display: inline-block; vertical-align: baseline; } /*所有子元素都设置为inline-block */
注意上面的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属性表示辅轴方向对齐方式为从下到上。
本文转载自：网易前端微专业讨论区，陈裕荣编写，本人做了修改和完善
时间： 2024-10-06 00:16:12