前面的话

  CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记。简单来说,就是CSS3多列布局可以自动将内容按指定的列数排列,这种特性实现的布局效果和报纸、杂志类排版非常相似。本文将详细介绍CSS多列布局的基本属性和用法

列宽

  column-width主要用于给元素指定最优的列宽度,实际列宽可能会更宽或更窄。如果不设置高度,文字将自动撑满整列,且最后一列的标点会溢出到容器外

  [注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀

column-width

  值: auto | <length>

  初始值: auto

  应用于: block、inline-block、table-cell(firefox不支持为table-cell设置该属性)

  继承性: 无

  [注意]column-width不可为0和负值;当column-width的值为auto或column-width的值大于元素宽度width一半时,没有分列效果(更准确地,由其他属性来决定)

列数

  column-count主要用于给元素指定允许的最大列数

  [注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀

column-count

  值: auto | <length>

  初始值: auto

  应用于: block、inline-block、table-cell(firefox不支持为table-cell设置该属性)

  继承性: 无

  [注意]column-count不可为0和负值;当column-count的值为auto时,默认没有分列效果(更准确地,由其他属性来决定)

列间距

  列间距column-gap用于定义相邻两列之间的空白间距

  [注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀

column-gap

  值: normal | <length>

  初始值: normal

  应用于: block、inline-block、table-cell

  继承性: 无

  [注意]column-gap的normal值默认情况下相当于1em。column-gap值不可为负值

列rule

  该属性用于绘制位于列间距水平中心的线条。该样式由column-rule-width、column-rule-style、column-rule-color这三条样式组成

  [注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀

column-rule

  值: <column-rule-width> || <column-rule-style> || <column-rule-color>

  标准中说column-rule类似于border,但实际更类似于outline,因为该样式并不占据实际的物理尺寸。outline详细情况移步至此

  [注意]如果column-rule-width的宽度大于column-gap的宽度,则可能会显示在列框内容中

跨列

  column-span属性用来定义子元素是否跨列

  [注意]firefox不支持该属性,IE10+和chrome浏览器支持标准写法,而safari浏览器及移动端android、IOS需要添加前缀

column-span

  值: none | all

  初始值: none

  应用于: block元素、table-cell元素(只有safari支持为table-cell设置该属性)

  继承性: 无

none: 默认不跨列
all: 跨越所有列

  [注意]当跨列元素被绝对定位(包括固定定位)或浮动后,跨列将不生效

  [注意]当跨列元素与column-rule的修饰线重叠时,在IE和safari中,跨列元素将覆盖修饰线,而chrome浏览器存在bug,跨列元素的文本覆盖修饰线,但跨列元素的背景可能会消失。

列填充

  在列布局中,有时由于内容不足,多列中的最后列往往没有足够内容填充,这时要实现所有列都具有相同高度的效果,需要使用列填充属性column-fill

column-fill

  值: auto | balance

  初始值: auto

  应用于: block、inline-block

  继承性: 无

auto: 默认各列高度随内容变化而变化
balance: 各列高度根据内容最多的一列进行统一

  [注意]目前只有firefox支持带前缀的column-fill属性

多列

  一般地,我们只关心是否分列以及列宽多少,对列间距并不考虑。于是,column这个column-width和column-count的复合属性就得到了比较广泛的使用

columns: column-width || column-count

  [注意]由于column-width和column-count这两个值的单位不同,所以顺序无关

  要知道,多列布局主要由列宽、列间距、列数及元素宽度影响,其布局等式是

     元素宽度 = 列数 * 列宽 + (列数-1)*列间距 <=> 列数*(列宽+列间距) - 列间距 = 元素宽度
或者, 列数 = (元素宽度+列间距)/(列宽+列间距)
或者, 列宽 = (元素宽度+列间距)/列数 - 列间距

  此等式中,列间距为定值,其他三个值为可变值,以下是各个值推算情况,其中N为实际列数,W为实际列宽

【1】如果元素宽度为auto,且列宽和列数都不是auto

  则 N = column-count W = column-width;

【2】如果列宽为auto,但列数不是auto,元素宽度不为auto

  则 N = column-count W = max(0,(元素宽度 - ((N-1)*列间距))/N)

【3】如果列宽不为auto,但列数是auto,元素宽度不为auto

  则 N = max(1,floor((元素宽度 + 列间距) / (列宽 + 列间距 )) W = ((元素宽度 + 列间距) / N) - 列间距

【4】如果列宽和列数都不是auto,元素宽度不为auto

  则 N = min(列宽 , floor((元素宽度 + 列间距) / (列宽 + 列间距))) W = ((元素宽度 + 列间距) / N) - 列间距

  [注意]若列数为小数,只保留整数部分

  [注意]所有的情况都是先推算出实际列数,再由实际列数推算实际列宽

CSS多列布局的更多相关文章

  1. css两列布局,一边固定宽度,另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  2. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  4. html5 css多列布局

    p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;   ...

  5. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  6. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

  7. CSS多列布局(实例)

    前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

  8. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  9. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

随机推荐

  1. xcode6如何支持空模板

    Single View Application 改成空模板的歩揍(xcode6.0.1): 1.删除info.plist 中的Main Storyboard file base name 选项 2.将 ...

  2. CCNA第二章TCP/IP简介考试要点学习笔记

    1.描述网络是如何工作的     DoD过程/应用层 -- OSI应用.表示和会话层(定义了结点到结点的应用通信协议以及对用户界面规范的控制): DoD主机到主机层 -- OSI传输层(保证了数据包的 ...

  3. 关于javascript对象的简单记忆法

    关于javascript对象方法的简单记忆法(个人整理) string对象: 大号小号闪烁加链接./big/small/blink/link/ 粗体斜体打字删除线./bold/italics/fixe ...

  4. windows phone 8.1教务在线客户端(后续)

    经过了一番折腾,这个wp教务在线算是告一段落了,其实原理很简单,就是post方式访问登陆页面返回cookie,然后带着这个cookie用get方式继续访问你想要访问并取回内容的页面,而且httpcli ...

  5. CocoaPods的版本升级

    我们在项目开发过程中为了更好的管理项目中引用的一些第三方的开源代码,我们在项目开发中都会使用CocoaPods,在项目中不使用Cocoapods可以绕过这篇帖子,但是Cocopods升级比较快,但是怎 ...

  6. zoj 3725 - Painting Storages(动归)

    题目要求找到至少存在m个连续被染成红色的情况,相对应的,我们求至多有m-1个连续的被染成红色的情况数目,然后用总的数目将其减去是更容易的做法. 用dp来找满足条件的情况数目,, 状态:dp[i][0] ...

  7. wireshark常用过滤规则

    wireshark常用过滤规则:(Filter中输入过滤规则)1.源ip过滤:ip.src==1.1.1.1               (过滤源ip为1.1.1.1的包) 2.目的ip过滤:ip.d ...

  8. Eclipse无法启动错误之Ensure that the org.eclipse.core.runtime bundle is resolved and started (see config.ini)

    悲剧,在安装Android Build Tools时,提醒需要关闭Eclipse进行安装,于是我在Tools安装完成后重启了Eclipse.但是Eclipse却无法启动,在log中有如下提示: Una ...

  9. LEFT JOIN 多表查询的应用

    表结构如下:只把主要字段列出 表一:付款记录表  Gather 字段:GatherID , AccountID, PayMents 金额, PayWay  付款方式 1 现金 2 刷卡 表2:销售记录 ...

  10. Centos6.6下安装MariaDB步骤,利用yum进行安装 第二篇

    一.安装过程参考的相关文章: Centos 使用YUM安装MariaDB CentOS安装并设置MariaDB CentOS用yum安装.配置MariaDB MariaDB远程连接配置 ERROR 1 ...