元素两段对齐
2016-02-20 17:36
309 查看
关于元素实现两段对齐的效果
效果如下
关于flex
http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html
还有一种是使用css的分栏,column。
<div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a> </div>
/* 说明: display:box定义布局为盒模型后,可使用盒模型下的box-pack:justify属性 */ .demo{ width: 90%; margin: 0 auto; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; } .demo a{ width:100px; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; }
效果如下
关于flex
http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html
还有一种是使用css的分栏,column。
/* 说明: 1.column-count定义了对象的列数,例子中有4个模块,那么定义为4列 2.column-gap定义了对象中列与列的间距,间距不能设置为百分比 */ .demo{ width: 90%;margin: 10px auto; -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; } .demo a{ width:100px; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; }
相关文章推荐
- 2016 0220 清除缓存
- R语言实战笔记
- 单片机驱动AT24C02存储芯片
- 单片机驱动AT24C02存储芯片
- 单片机驱动AT24C02存储芯片
- 获取动态类型变量的属性值
- maven 的 pom.xml 文件报错:ArtifactTransferException: Failure to transfer
- 夯实基础阶段:第一天:C/C++ 一星难度刷题
- Eclipse配置PyDev插件
- 设计模式之原型模式
- Android高效加载大图、多图解决方案,有效避免程序OOM
- javascript变量声明提升(hoisting)
- 这几年遇到的奇葩程序员(1)
- CodeForces 625C K-special Tables
- Android px、dp、sp之间相互转换
- mybatis0210 mybatis和ehcache缓存框架整合
- OC修改文件夹的函数
- Ubuntu14.04 LTS安装QQ8.1
- Hibernate 缓存机制详解
- Android事件分发机制完全解析,带你从源码的角度彻底理解(下)