CSS布局自适应等分比例实践
2015-08-08 10:10
627 查看
CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性。
该样式兼容性较好,但是无法实现当里面的列增多时比例也随着变化,必须手动修改,当然你也可以使用一个JS来调整了。
参考之前写过的inline-block替换float的代码,使用该样式还可以实现布局居中等块级元素所具有的特性。
我们知道表格可以根据内容进行划分,CSS也有一个样式是display:table来实现类似表格的布局,不过不支持IE8以下浏览器。
旧语法:
新语法:
该方法只适用于高级浏览器,IE10以下的还是算了。具体介绍
例如Bootstrap的栅格化系统
缺点和第一个的float一样,需要根据列数来跳出宽度调整。
如果需要兼容IE6-IE7的,如果列数固定可以使用第一种和第二种。如果列数不固定,可以加少量js支持。
如果是只考虑移动的,考虑第三种,兼容性比下面的flex支持的比较好。
如果单纯的不考虑低版本浏览器的,可以考虑使用第四种。
一:浮动布局+百分比
emmet html代码:ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容}
.float-ul{width: 100%; overflow: hidden; zoom: 1;} .float-ul li{float: left; width: 20%;}
该样式兼容性较好,但是无法实现当里面的列增多时比例也随着变化,必须手动修改,当然你也可以使用一个JS来调整了。
二:行内元素(inline-block)+百分比
参考之前写过的inline-block替换float的代码,使用该样式还可以实现布局居中等块级元素所具有的特性。.inline-ul{font-size: 0; *word-spacing: -1px;} .inline-ul li{display: inline-block; *display: inline; *zoom: 1; font-size: 14px; vertical-align: top; word-spacing: normal; letter-spacing: normal; width: 20%;} @media screen and (-webkit-min-device-pixel-ratio:0){ .inline-ul{letter-spacing: -5px;} }
三:display:table
+ display:table-cell
我们知道表格可以根据内容进行划分,CSS也有一个样式是display:table来实现类似表格的布局,不过不支持IE8以下浏览器。.table-cell{display: table; width: 100%;} .table-cell li{display: table-cell;}
四:使用css3 display:flex.
旧语法:.flex-ul{display: -webkit-box; display: box;} .flex-ul li{-webkit-box-flex:1; box-flex:1;}
新语法:
.flex-ul{display:-webkit-flex; display: flex; width: 100%;} .flex-ul li{-webkit-flex:1; flex:1;}
该方法只适用于高级浏览器,IE10以下的还是算了。具体介绍
五:使用栅格化系统
例如Bootstrap的栅格化系统<div class="container"> <div class="row"> <div class="col-md-3"></div> ... </div> </div>
.col-md-3 { float:left; } @media (min-width: 992px) { .col-md-3 { width: 25%; } /* 父级容器的3/12 */ }
缺点和第一个的float一样,需要根据列数来跳出宽度调整。
总结:
如果需要兼容IE6-IE7的,如果列数固定可以使用第一种和第二种。如果列数不固定,可以加少量js支持。如果是只考虑移动的,考虑第三种,兼容性比下面的flex支持的比较好。
如果单纯的不考虑低版本浏览器的,可以考虑使用第四种。
相关文章推荐
- 【CSS3】 线性渐变
- CSS复习第一天(简单规范)
- 将Activity设置成窗口的样式
- HTML学习笔记(3)——CSS的引入,选择器和文本样式
- CSS字体设置
- css3绘制中国结
- HTML与CSS_基础 翁恺 笔记(2015.8.10更新)
- HTML与CSS_基础 翁恺 笔记(2015 8.10更新)
- css 浮动float 的一些解决办法
- 如果css足够强大了,你还会用编程的方式实现去实现css已有的功能吗?
- 三行css代码实现垂直居中
- 全方位了解CSS3的Regions扩展
- iOS 设置NavigationBar和BarButtonItem的主题样式(iOS 6和iOS7适配)
- (转)CSS中空格的写法
- (转)CSS中空格的写法
- 滑动门
- 关于HTML+css 的一些学习笔记
- CSS选择器
- iOS 根据字符串样式、字符串长度计算字符串所占大小
- CSS text-transform 属性