CSS3之多列布局columns详解

CSS3提供了个新属性columns用于多列布局。
基本属性如下：

1. columns: <'column-width'> || <'column-count'>
设置对象的列数和每列的宽度。复合属性。

/*列数及列宽固定*/

-moz-columns: 200px 3;

-webkit-columns: 200px 3;

columns: 200px 3;

/*列宽固定，根据容器宽度液态分布列数*/

-moz-columns: 200px;

-webkit-columns: 200px;

columns: 200px;

2. column-width：<length> | auto 设置对象的宽度；使用像素表示。
auto：根据 <' column-count '> 自定分配宽度

/*列宽固定，根据容器宽度液态分布列数*/

-moz-column-width: 200px;

-webkit-column-width: 200px;

column-width: 200px;

3. column-count：<integer> | auto 用来定义对象中的列数，使用数字 1-10表示。
auto：根据 <' column-width '> 自定分配宽度

/*列数固定，根据容器宽度液态分布列宽*/

-moz-column-count:5;

-webkit-column-count:5;

column-count:5;

4. column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。

/* 固定列间隙为40px */

-moz-column-gap: 40px;

-webkit-column-gap: 40px;

column-gap: 40px;

/* 列间隙column-gap: normal；font-size为14px时，列间隙column-gap:normal的计算值也为14px */

-moz-column-gap: normal;

-webkit-column-gap: normal;

column-gap: normal;

5. column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
设置对象的列与列之间的边框。复合属性

/* 在列与列之间设置绿色间隔线 */

-moz-column-rule: 10px solid #090;

-webkit-column-rule: 10px solid #090;

column-rule: 10px solid #090;

6. column-fill：auto | balance
设置对象所有列的高度是否统一;
auto： 列高度自适应内容;
balance： 所有列的高度以其中最高的一列统一

7. column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置对象之前是否断行;
auto： 既不强迫也不禁止在元素之前断行并产生新列;
always： 总是在元素之前断行并产生新列
avoid：避免在元素之前断行并产生新列

8. column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置对象之后是否断行

9. column-break-inside：auto | avoid | avoid-page | avoid-column
设置对象内部是否断行;
auto：既不强迫也不禁止在元素内部断行并产生新列;
avoid：避免在元素内部断行并产生新列

column-span: none（默认值）|| all，none是不跨越任何列。all 是元素跨越所有列，并定位在列的Z轴之上。

浏览器支持：

Internet Explorer 10+ 和 Opera 支持 column-width 属性。
Firefox 支持替代的 -moz-column-width 属性。
Safari 和 Chrome 支持替代的 -webkit-column-width 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column-width 属性。

下面使用column实现一个瀑布流布局的demo如下：

先预览看效果

碰到的问题如下：
1. 在做demo的时候，需要显示内容的div设置高度为100% 和 overflow: auto; 否则的话，多列样式column-width布局时内容被截断、错乱。
比如上面的demo的样式添加如下代码：

.item {

  height: 100%;

  overflow: auto;

}

下面是html代码如下：

<!DOCTYPE html>

 <html>

    <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <meta content="yes" name="apple-mobile-web-app-capable">

        <meta content="black" name="apple-mobile-web-app-status-bar-style">

        <meta content="telephone=no" name="format-detection">

        <meta content="email=no" name="format-detection">

        <title>标题</title>

        <link rel="shortcut icon" href="/favicon.ico">

        <link href="./index.css" rel="stylesheet"/>

    </head>

    <body>

      <div class="container">

        <div class="waterfall">

          <div class="item">

            <img src="http://dummyimage.com/640x4:3" />

            <p>我来测试demo111111</p>

          </div>

          <div class="item">我来测试demo2222</div>

          <div class="item">

            <img src="http://dummyimage.com/640x3:4" />

            <p>我来测试demo3333</p>

          </div>

          <div class="item">

            <img src="http://dummyimage.com/480x4:3" />

            <p>我来测试demo4444</p>

          </div>

          <div class="item">

            <img src="http://dummyimage.com/480x4:3" />

            <p>我来测试demo5555</p>

          </div>

          <div class="item">

            <img src="http://dummyimage.com/480x3:4" />

            <p>我来测试demo6666</p>

          </div>

          <div class="item">

            <img src="http://dummyimage.com/640x21:10" />

            <p>我来测试demo7777</p>

          </div>

          <div class="item">

            <p>我来测试demo8888</p>

          </div>

        </div>

      </div>

    </body>

</html>

CSS代码如下：

* {

  margin:;

  padding:;

}

.container {

  width: 96%;

  margin: 20px auto 20px;

}

.waterfall {

  column-count:;

  -webkit-column-count:;

  -moz-column-count:;

  -ms-column-count:;

  -o-column-count:;

  column-gap: 15px;

  -webkit-column-gap: 15px;

  -moz-column-gap: 15px;

  -ms-column-gap: 15px;

  -o-column-gap: 15px;

}

.item {

  display: inline-block;

  width: 100%;

  box-sizing: border-box;

  padding: 1em;

  background-color: white;

  border: 1px solid #ccc;

  border-radius: 4px;

  -webkit-border-radius: 4px;

  /* 设置上下间距 */

  margin-bottom: 10px;

  /*  需要设置 height: 100%; overflow: auto */

  height: 100%;

  overflow: auto;

}

.item img {

  width: 100%;

  padding-bottom: 1em;

  margin-bottom: 0.5em;

  border-bottom: 1px solid #cccccc;

}

CSS3之多列布局columns详解的更多相关文章

  1. css3中的多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  2. CSS3布局之多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  3. CSS3 多列布局——Columns

    CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...

  4. ExtJs常用布局--layout详解（含实例）

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  5. 多列布局——Columns

    为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...

  6. css3浏览器私有属性前缀使用详解

    什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...

  7. css 13-CSS3属性：Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  8. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  9. 弹性布局学习-详解align-content(六)

    弹性布局学习-详解align-content(六)

随机推荐

  1. Java 多态 ——一个案例 彻底搞懂它

    最近,发现基础真的hin重要.比如,Java中多态的特性,在学习中就是很难懂,比较抽象的概念.学的时候就犯糊涂,但日后会发现,基础在日常工作的理解中占有重要的角色. 下面,我将用一个代码实例,回忆和巩 ...

  2. 【操作系统】二、JVM线程与Linux内核线程的映射

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...

  3. java——线程

    线程与进程 1.线程:程序中单独顺序的控制流 线程本身是通过程序进行运行 线程是程序中的顺序控制流,只能使用分配给程序的资源与环境 2.进程:执行中的程序 一个进程可以包含一个或多个线程 一个进程至少 ...

  4. Linux常用基本命令:tr-替换或者删除字符

    tr命令 作用:从标准输入中替换,缩减或者删除字符,并将结果输出到标准输出 格式:tr [option] [set1] [set2] tr [选项] [字符1] [字符2] 把y替换m, o替换e,并 ...

  5. canvas-color的几种设置

    #ffff #642 = #664422 rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,82%,33%,0.6) red

  6. Arrow模块生成时间

    import arrow def isLeapYear(years): ''' 通过判断闰年,获取年份years下一年的总天数 :param years: 年份,int :return:days_su ...

  7. python基础之数据的三大结构

    python的三大数据结构 1.顺序 2.分支 3.循环 # if语句联系# 如果age小于18岁,则打印信息“未成年”age = 17if age <= 18: print("未成年 ...

  8. Oracle 中 流程控制函数 decode用法

    函数介绍 DECODE函数是ORACLE PL/SQL的功能强大的函数之一,目前还只有ORACLE公司的SQL提供了此函数,其它数据库厂商的SQL实现还没有此功能. DECODE有什么用途呢?先构造一 ...

  9. Expo大作战(三十九)--expo sdk api之 DocumentPicker,Contacts(获取手机联系人信息),Branch

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  10. JAVA 设计模式遵循的六大基本准则

    JAVA 设计模式遵循的六大基本准则 一.单一职责原则:(Single Responsibility Pinciple)  一个类只负责一项职责. 当超过一项职责需要负责时,需要增加新的类来负责新的职 ...