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. 通过IEnumerable接口遍历数据

    使用IEnumerable接口遍历数据,这在项目中会经常的用到,这个类型呢主要是一个枚举器. 1.首先需要让该类型实现一个名字叫IEnumerable的接口,实现该接口的主要目的是为了让当前类型中增加 ...

  2. asynchronous.js

    // 异步加载js (function(){ var _asyn_js_data = ['index.js','index1.js','index2.js','index3.js'] for(var ...

  3. deepin使用笔记-解决安装并解决gvim没有启动器的问题

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 1.安装gvim #apt-get install vim-gtk3 2.创建桌面启动器 创建/usr/share/applic ...

  4. Python简单的网络编程

    OSI 模型介绍 应用层 -- 对接受的数据进行解释.加密与解密.压缩与解压缩 会话层 -- 通过传输层(端口号: 传输端口和接受端口) 建立数据传输的通路 传输层 -- 定义了一些传输数据的协议和端 ...

  5. Docker 启动遇到 Error starting daemon: Error initializing network controller 错误

    docker 版本 1.10.3 一台装有 docker 的机器重启后,没法启动,/var/log/messages 展示如下错误信息: May 17 11:11:14 gziba-hc03 syst ...

  6. nginx报错zero size shared memory zone one

    为了限速,在虚拟主机中加上了一个参数:limit_conn one 1:结果导致重启nginx报错: zero size shared memory zone "one"解决办法是 ...

  7. JS 数组位置方法 indexOf()和lastIndexOf（）的理解

    var numbers = [1,3,5,7,9,4,3,2,1]; console.log(numbers.indexOf(5)); //从数组的0位开始查找 5 位于数组里面的位置 输出2 首先 ...

  8. SVN SVN合并(Merge)与拉取分支(Branch/tag)操作简介

    SVN合并(Merge)与拉取分支(Branch/tag)操作简介 合并(Merge) 例子:把对feature_branch\project_name_v3.3.7_branch的修改合并到deve ...

  9. 安卓开发_浅谈TimePicker（时间选择器）

    TimePicker也继承自FrameLayout类.时间选择控件向用户显示一天中的时间(可以为24小时,也可以为AM/PM制),并允许用户进行选择.如果要捕获用户修改时间数据的事件,便需要为Time ...

  10. Java网络编程--InetAdress类

    一.地址 java.net包中的InetAddress 类对象含有一个Internet主机地址的域名和Ip地址 www.sina.com.cn/202.108.35.210 二.获取地址 1.获取In ...