本文共 2038 字，大约阅读时间需要 6 分钟。
自己写了一个图表样式，利用box-align,box-pack属性end实现了其内部元素垂直底部对齐，在利用该属性前，设置其display属性为box即可。
css代码：
.tubiao-content{width: 90%;margin: auto;}
.tubiao{border-bottom: solid 1px #d0cece; padding-top: 2.4rem;}
.time01 {
position: relative;
float: left;
margin-left:12%;
width: 2.6rem;
/* Firefox */
display:-moz-box;
-moz-box-pack:end;
-moz-box-align:end;
/* Safari、Opera 以及 Chrome */
display:-webkit-box;
-webkit-box-pack:end;
-webkit-box-align:end;
/* W3C */
display:box;
box-pack:end;
box-align:end;
}
@media only screen and (min-width: 300px) and (max-width: 350px) {
.time01 {margin-left:11%;}
}
.time01 li{width: 1.3rem;position: relative;}
.time01 li.time01-red{background: #f08417; height: 7rem;}
.time01 li.time01-green{background: #79bd3f;height: 14rem;}
.time01 li span{position: absolute;font-size: 1.2rem;}
.time01 li.time01-red span{left: -2.2rem;top: -0.5rem;}
.time01 li.time01-green span{left:1.5rem;top: -0.5rem;}
.tubiao-time{position:absolute;font-size: 1.5rem;width: 8rem;bottom: -2.5rem;left: -0.5rem;}
html代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < div class = "tubiao-content" > < div class = "tubiao mui-clearfix" > < div class = "time01 mui-clearfix" > < li class = "time01-red" >< span >300</ span ></ li > < li class = "time01-green" >< span >500</ span ></ li > < div class = "tubiao-time" >0~6点</ div > </ div > < div class = "time01 mui-clearfix" > < li class = "time01-red" >< span >300</ span ></ li > < li class = "time01-green" >< span >500</ span ></ li > < div class = "tubiao-time" >0~6点</ div > </ div > < div class = "time01 mui-clearfix" > < li class = "time01-red" >< span >300</ span ></ li > < li class = "time01-green" >< span >500</ span ></ li > < div class = "tubiao-time" >0~6点</ div > </ div > < div class = "time01 mui-clearfix" > < li class = "time01-red" >< span >300</ span ></ li > < li class = "time01-green" >< span >500</ span ></ li > < div class = "tubiao-time" >0~6点</ div > </ div > </ div > </ div > |
效果如下：
本文转自 小旭依然 51CTO博客，原文链接:http://blog.51cto.com/xuyran/1792897
转载地址：http://rxfbm.baihongyu.com/