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. 初学HTML-7

    表单中的一些标签 label标签:让文字和输入框进行绑定,即,点击文字,输入框可以开始输入(默认文字和输入框没有关系,不会聚焦) 格式:<form action=""> ...

  2. 學習Echart 2.2.7

    <!-- Echart 2.2.7 http://echarts.baidu.com/echarts2/doc/example/force1.html#macarons https://gith ...

  3. 小程序和PHP学习笔记 ----- 不定期更新。

    学习tp5和小程序过程需要记住的重点记录 1,box-sizing: border-box; 规定两个并排的带边框的框 border-box 为元素设定的宽度和高度决定了元素的边框盒. 就是说,为元素 ...

  4. 2018-02-06 编程猫IDE体验:对Scratch的改进

    前两天偶遇编程猫推介(为什么没有中文的编程?), 第一眼感觉像Scratch, 求证之下确实, 并且据说有改良. 今天非常粗浅地尝试一下, 限于水平没有做出很炫的效果, 不过颇有些发现. 首先上最终效 ...

  5. Oracle 11g数据库详细安装过程

    1.Oracle 11g下载 官方网址为:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.h ...

  6. Linux 学习笔记之超详细基础linux命令 Part 11

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 10---------------- ...

  7. 安卓开发_WebView设置打开网页缩放问题

    之前实现打开网页的方式,测试后,发现不能够对网页进行缩放操作,这对部分网页来说是十分不便的, 百度了一下解决方案 其实只需要加几行代码就可以实现网页缩放操作 settings.setUseWideVi ...

  8. 微信小程序-01-项目组成文件介绍（入门篇）

    自古开篇先说两句,写这些笔记不是学习用的,主要是后续分享一些遇到的坑,碰到过什么样的问题,怎么去解决,如果你不是一个很耐心无看文章的人,建议去 网易云课堂找一些课程,跟着别人的脚步或许会更有动力,我的 ...

  9. 常用的docker命令

    在这里记一下,以免以后忘记了. ------------------------------------------------------------------------------------ ...

  10. OneAPM大讲堂 | 谁更快？JavaScript 框架性能评测

    文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 网页性能是一个丰富且又复杂的话题.在本帖中,我们会将讨论的范围局限在前端 JavaScript 框架上,探究相对于另外一种框架而言 ...