box-align,box-pack实现元素垂直底部对齐
2016-06-25 21:25
393 查看
自己写了一个图表样式,利用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代码
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点</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>效果如下:
相关文章推荐
- 记录一些遇到的坑
- 二级联动查询数据库到下拉框
- 二维码控件移植需要注意的点
- js(四)——对象使用
- 练习题
- B-树(B+树) 学习总结
- java内功 ---- jvm虚拟机原理总结,侧重于虚拟机类加载执行系统
- 201. Bitwise AND of Numbers Range
- 送给正在努力的你,我,他,还有她!
- LeetCode 213. House Robber II
- 几个用Python实现的简单算法
- codeforces 685B Kay and Snowflake 树的重心
- Android 通用流行15类框架大全,你都知道吗?
- 记第一次打字测试
- 小白上手第二弹——浅析Context
- 事件处理
- 【JavaScript】DOM
- android 四大组件之Service(8) 通过信使进行远程通信
- soapui笔记7:断言2
- 因为我爱你,所以我不愿做那2分的缺憾