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. Excel破解工作表保护

    宏运行 Public Sub Password_cracking() Const DBLSPACE As String = vbNewLine & vbNewLine Const AUTHOR ...

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

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

  3. Spark jdbc postgresql数据库连接和写入操作源码解读

    概述:Spark postgresql jdbc 数据库连接和写入操作源码解读,详细记录了SparkSQL对数据库的操作,通过java程序,在本地开发和运行.整体为,Spark建立数据库连接,读取数据 ...

  4. tensorflow 文件队列

    使用文件队列,防止爆内存 # # 通过队列打开图片文件 file_queue = tf.train.string_input_producer(paths) img_reader = tf.Whole ...

  5. recovery 恢复出厂设置失败Data wipe failed

    最近客户反馈,编译32位的android系统,在recovery中执行恢复出厂设置的时候失败了,失败的打印提升信息如下. Formatting /data... [ 2.191404] E:get_f ...

  6. tkinter中Radiobutton单选框控件（七）

    Radiobutton控件 由于本次内容中好多知识都是之前重复解释过的,本次就不做解释了.不太清楚的内容请参考tkinter1-6节中的内容 import tkinter wuya = tkinter ...

  7. 08-OpenLDAP主机控制策略

    OpenLDAP主机控制策略 阅读视图 参考 环境准备 openldap服务端配置 openldap客户端配置 客户端测试登录 故障处理 1. 参考 本文基本转载博客openldap主机访问控制(基于 ...

  8. python第三十天-类

    编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条条大路通罗马,实现一个任务的方式有很 ...

  9. MonkeyRunner 之如何获取APP的Package Name和Activity Name

    别人写的就收藏了: MonkeyRunner 之如何获取APP的Package Name和Activity Name http://www.mamicode.com/info-detail-51278 ...

  10. Memcached、Redis、RabbitMQ

    目录 一.Memcached 二.Redis 三.RabbitMQ Memcached Memcache 是一个开源.高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中 ...