原文链接:http://caibaojian.com/css-equal-layout.html

CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性。

一:浮动布局+百分比

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的栅格化系统

//code from http://caibaojian.com/css-equal-layout.html
<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支持的比较好。

如果单纯的不考虑低版本浏览器的,可以考虑使用第四种。

CSS等分布局方法的更多相关文章

  1. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  2. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  3. CSS 常用的定位和布局方法汇总(已添加源码地址)

    CSS-Layout 旨在打造详尽的前端布局代码学习库(自从用了框架开发,CSS生疏了不少,所以开这个库练练手)SF不能正确解析含有中文的网址,所以某些预览链接无法跳转,请访问我的博客阅读此文 常见定 ...

  4. css 实现等分布局

    目前移动版等分布局最常用的是 flex 等分,pc 端上用得更多则是 float. 假设父元素下有 3 个子元素,每个子元素相隔 24px,子元素等分父元素宽度 实现:float + margin ( ...

  5. amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  6. flex 布局 初次接触这个好使又不是特别好用的布局方法

    刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而, ...

  7. CSS常见布局解决方案

    最近要准备移动端项目,大半年没好好写过CSS了,今天恶补了一下CSS的一些布局,下面做一些分享. 水平居中布局 1.margin + 定宽 <div class="parent&quo ...

  8. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  9. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

随机推荐

  1. HDU 1286:找新朋友(欧拉函数)

    http://acm.hdu.edu.cn/showproblem.php?pid=1286 题意:中文. 思路:求欧拉函数. #include <cstdio> #include < ...

  2. git报错---If no other git process is currently running...

    今天帮同事上传一个代码(预生产环境),当我执行到git add 文件 的时候,出现了如下错误: If no other git process is currently running, this p ...

  3. C语言学习书籍推荐《C语言入门经典(第4版)》

    霍顿 (Ivor Horton) (作者), 杨浩 (译者) <C语言入门经典(第4版)>的目标是使你在C语言程序设计方面由一位初学者成为一位称职的程序员.读者基本不需要具备任何编程知识, ...

  4. Java学习笔记之---内部类

    Java学习笔记之---内部类 (一)成员内部类 内部类在外部使用时,无法直接实例化,需要借助外部类信息才能实例化 内部类的访问修饰符可以任意,但是访问范围会受到影响 内部类可以直接访问外部类的成员, ...

  5. Nginx+Tomat8负载后,利用Redis实现Tomcat8的session共享

    网上相应的文章应该都介绍,这里只特别记录下笔者在实操的过程出现的问题.此文件只针对tomcat 8 版本,之前版本可略过. tomcat 8 中的context.xml文件修改,增加以下配置. Jav ...

  6. 控制反转&依赖注入

    IoC(Inversion of Control,控制反转).这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系.这是什么 ...

  7. bzoj 3643Phi的反函数

    3643: Phi的反函数 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 298  Solved: 192[Submit][Status][Discus ...

  8. 【小家Spring】老项目迁移问题:@ImportResource导入的xml配置里的Bean能够使用@PropertySource导入的属性值吗?

    #### 每篇一句 > 大师都是偏执的,偏执才能产生力量,妥协是没有力量的.你对全世界妥协了你就是空气.所以若没有偏见,哪来的大师呢 #### 相关阅读 [[小家Spring]详解Propert ...

  9. 如何使用百度EasyDL进行情感分析

    使用百度EasyDL定制化训练和服务平台有一段时间了,越来越能体会到EasyDL的易用性.在此之前我也接触过不少的深度学习平台,如类脑平台.Google的GCP深度学习平台.AWS深度学习平台,但我觉 ...

  10. HBase的优化

    HBase的优化 高可用 在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果 Hmaster 挂掉了,那么整个 HBase ...