box-align,box-pack實(shí)現(xiàn)元素垂直底部對(duì)齊

自己寫了一個(gè)圖表樣式，利用box-align,box-pack屬性end實(shí)現(xiàn)了其內(nèi)部元素垂直底部對(duì)齊，在利用該屬性前，設(shè)置其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代碼

<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點(diǎn)</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點(diǎn)</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點(diǎn)</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點(diǎn)</div>
						</div>	
						</div>
						
					</div>

效果如下：