近日在O2O移动电商手机页面时有个需求，就是一堆ul列表里面，有一个li的高度不确定，但是要求其他的li的高度，以它的高度垂直居中。
具体如下啊
<body>
<div class="div1">
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>昆明北路旗舰店</li><li>夏款牛仔裤女</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道XXXX广场店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道与XXXX路XX大道XXXX路口广场店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
</div>
</body>
所有的数据都是从后台请求过来的，你会发现这个地址所在的li有的比较长有的比较短，所以它可能一行显示也可能多行显示，那么就会把这个所在的li的高度撑开，要求其他的li，都以这个li撑开的高度垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;}
.div1{width:100%;font-size:24px;}
.div1 ul{width:100%;border-bottom: 1px dashed #ccc;}
.div1 ul li{
line-height: 40px;
display: inline-block;
width:25%;
vertical-align: middle;
text-align: center;
}
.div1 ul li:nth-child(3){
text-align: left;
}
</style>
</head>
<body>
<div class="div1">
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>昆明北路旗舰店</li><li>夏款牛仔裤女</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道XXXX广场店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>上海市XXXX路XX大道与XXXX路XX大道XXXX路口广场店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
<ul><li>2016-01-01</li><li>￥160</li><li>陕西南路旗舰店</li><li>夏款牛仔裤男</li></ul>
</div>
</body>
</html>
暂不考虑自适应，想了解自适应的朋友请移步：
简单说说rem布局
自适应布局JQuery插件，rem布局
关于响应式布局的相关介绍
