Box-align,box-pack implementing element Vertical Bottom Alignment

wrote a chart style by itself, using the Box-align,box-pack property end to achieve the vertical bottom alignment of its inner elements, and before using this property, set its Display property to box.

CSS code:

. 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 and Chrome */

Display:-webkit-box;

-webkit-box-pack:end;

-webkit-box-align:end;

*/*

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 code

<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 point </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 point </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 point </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 Point </div></div></div></div>

The effect is as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/83/46/wKioL1duhvLyrHqeAAAZoGedStA873.jpg "title=" 36020160625212740312.jpg "alt=" Wkiol1duhvlyrhqeaaazogedsta873.jpg "/>

Box-align,box-pack implementing element Vertical Bottom Alignment