CSS3之多列布局columns详解
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详解的更多相关文章
- css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- ExtJs常用布局--layout详解（含实例）
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- 多列布局——Columns
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...
- css3浏览器私有属性前缀使用详解
什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...
- css 13-CSS3属性：Flex布局图文详解
13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解
目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果
- 弹性布局学习-详解align-content(六)
弹性布局学习-详解align-content(六)
随机推荐
- 过三关 Java冒泡排序选择排序插入排序小练习
材料:猴子排序,按照身高来从小到大来排序. 第一关: 老猴子带领小猴子队伍按大小逐一比较,交换,开始高矮排列队伍.(冒泡排序) 第二关: 太慢了,给第一关增加难度,进行选择排序 第三关: 最后,尝试选 ...
- Bell(hdu4767+矩阵+中国剩余定理+bell数+Stirling数+欧几里德)
Bell Time Limit:3000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- 2017-12-21 FriceEngine试用与API中文化
早先就听闻FriceEngine已有中文接口版本, 可惜没有机会尝试. 经原作者 @大笨蛋千里冰封 (Github账号 @ice1000 )建议, 在FriceEngine的DSL封装的接口基础上, ...
- Salesforce的Developer Console简介
Developer Console是Salesforce提供的一个基于浏览器的集成开发环境.在Developer Console中,开发者可以新建.修改各种Apex.Visualforce.Light ...
- 测试思想 QA的价值体现
QA的价值体现 by:授客 QQ:1033553122 1． 缺陷挖掘价值 QA人员一个很重要的价值就是在尽可能短的时间内找出尽可能多的缺陷. 某种意义上说,缺陷直观的反应了产品的质量,QA发现的有 ...
- 【Java入门提高篇】Day34 Java容器类详解（十五）WeakHashMap详解
源码详解系列均基于JDK8进行解析 说明 在Java容器详解系列文章的最后,介绍一个相对特殊的成员:WeakHashMap,从名字可以看出它是一个 Map.它的使用上跟HashMap并没有什么区别,所 ...
- python第四十八天--高级FTP
高级FTP服务器1. 用户加密认证2. 多用户同时登陆3. 每个用户有自己的家目录且只能访问自己的家目录4. 对用户进行磁盘配额.不同用户配额可不同5. 用户可以登陆server后,可切换目录6. 查 ...
- JavaScript高级特性-创建对象的九种方式
1. 对象字面量 通过这种方式创建对象极为简单,将属性名用引号括起来,再将属性名和属性值之间以冒号分隔,各属性名值对之后用逗号隔开,最后一个属性不用逗号隔开,所有的属性名值对用大括号括起来,像这样: ...
- 第七章 鼠标（CHECKER3）
/*--------------------------------------------- CHECKER3.C -- Mouse Hit-Test Demo Program No.3 (c) C ...
- ccf--20140903--字符串匹配
本题思路简单 题目和代码如下: 问题描述 试题编号: 201409-3 试题名称: 字符串匹配 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给出一个字符串和多行文字,在这些 ...