需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：img {position: absolutebottom: 80pxz-index: -1}。
3、浏览器运行index.html页面，此时实现了背景图片距离底部80px大小。
目标效果：每一排都要顶部对齐
方法：1、块级元素行内显示：display: inline-block
2、顶部对齐：vertical-align: text-top
实现步骤：
1、建立基本元素标签，并设置颜色区分， 设置不同高度来模拟你所说的高度不一致的情况
代码：
效果图：
2、换行：使每个li变成行内块级元素，宽度超过ul宽度时会自动换行
代码：
效果图：
3、顶部对齐：其实第二步已经做到了，是默认的顶部对齐，但经测试有时候不会顶部对齐，如：将文字去掉
所以加上一句：vertical-align: text-top更为保险了。
4、完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{ list-style:none }
.myli {
width: 25px
margin-top: 10px
color: #ffffff
vertical-align: text-top
display: inline-block
}
</style>
</head>
<body>
<ul style="width: 100pxmargin: autoborder: #303030 1px solid">
<li class="myli" style="height: 20px background-color: #666"></li>
<li class="myli" style="height: 40px background-color: rgb(17, 233, 186)"></li>
<li class="myli" style="height: 28px background-color: rgb(11, 87, 226)"></li>
<li class="myli" style="height: 60px background-color: rgb(7, 194, 178)"></li>
<li class="myli" style="height: 10px background-color: #303030"></li>
<li class="myli" style="height: 20px background-color: #bcbe23"></li>
<li class="myli" style="height: 40px background-color: #370d85"></li>
<li class="myli" style="height: 20px background-color: #303030"></li>
</ul>
</body>
</html>
