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框架之Struts2（二）

    一.Action 配置说明 //请求的直接转发 <package name="packageUser" namespace="" extends=&quo ...

  2. LoadRunner接口测试标准模板

    Action() { int nHttpRetCode; // 默认最大长度为256,get请求需注意缓存问题,需要根据content-length进行修改 web_set_max_html_para ...

  3. 复盘价值1000万的腾讯云硬盘固件"BUG"

    摘要: 除了吃瓜,还是得吸取教训啊同学们! 这次,我从纯技术角度分析腾讯云与前沿数控的磁盘数据丢失事件,不站队. 硬盘门 这里说的硬盘门不是10年前陈老师的那一次,而聊的是最近"腾讯云&qu ...

  4. 我的Java之旅 第五课 JAVA 语言语法 集合

    JAVA集合只能存放引用类型的的数据,不能存放基本数据类型,int 可以用 Integer代替. 一.集合接口  1.  Iterable<E> 实现这个接口允许对象成为 "fo ...

  5. Visual Studio 2015速递(4)——高级特性之移动开发

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  6. 【转】Max2013脚本工具的乱码问题

    转自:http://www.cnblogs.com/sitt/archive/2012/11/21/2780481.html 有时一些中文的脚本会在max2013中显示为乱码,是因为max2013将多 ...

  7. WRT 下 C++ wstring, string, String^ 互转

    由于项目原因,需要引入C++. wstring 与 string 的互转研究了一段时间,坑主要在于使用下面这种方式进行转换,中文会乱码 wstring ws = L"这是一段测试文字&quo ...

  8. linux 开机自启动脚本

    在/etc/rc.local文件中添加自启动命令(其中一种方法) 1.案例,就用博主本人之前发的博文 “nginx + flask + uwsgi + centos + python3 搭建web项目 ...

  9. VMware-workstation12.5.6 新建虚拟机 安装 centos6.5

    1.到官方下载镜像文件 注意:看到上面那两个红框不要着急复制链接用迅雷下载,因为点击进去是个页面,不知道官方做这个用意是怎样的,个人感觉很傻缺我们只要点击第一个红框就行 *************** ...

  10. python第三十一天-----类的封装、继承,多态.....

    封装 封装最好理解了.封装是面向对象的特征之一,是对象和类概念的主要特性. 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. cla ...