文档章节

CSS3多列column布局

lotozhou
 lotozhou
发布于 2015/12/02 11:07
字数 1209
阅读 46
收藏 1
点赞 0
评论 0
Properties属性 CSS Version版本 Inherit From Parent继承性 Description简介
column css3
设置或检索对象的列数和每列的宽度。复合属性
column-width
css3 设置或检索对象每列的宽度
column-count css3 设置或检索对象的列数
column-gap css3 设置或检索对象的列与列之间的间隙
column-rule css3 设置或检索对象的列与列之间的边框。复合属性
column-rule-width css3 设置或检索对象的列与列之间的边框厚度。
column-rule-style css3 设置或检索对象的列与列之间的边框样式。
column-rule-color css3 设置或检索对象的列与列之间的边框颜色。
column-span css3 设置或检索对象元素是否横跨所有列。
column-fill css3 设置或检索对象所有列的高度是否统一。
column-break-before css3 设置或检索对象之前是否断行。
column-break-after css3 设置或检索对象之前是否断行。
column-break-inside css3 设置或检索对象内部是否断行。

columns

设置或检索对象的列数和每列的宽度。复合属性

    columns:[ column-width ] || [ column-count ]

.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

column-width

 设置或检索对象每列的宽度

.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}
.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}
.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}

column-count

设置或检索对象的列数

    column-count:<integer> | auto

    <integer>:用整数值来定义列数。不允许负值

    auto:根据column-width自定分配宽度

column-gap

设置或检索对象的列与列之间的间隙

column-gap:<length> | normal

    <length>:用长度值来定义列与列之间的间隙。不允许负值

    normal:与font-size大小相同。假设该对象的font-size为16px,则normal值为16px,类推。

column-rule

设置或检索对象的列与列之间的边框。复合属性。

column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

    [ column-rule-width ]:设置或检索对象的列与列之间的边框厚度。

    [ column-rule-style ]:设置或检索对象的列与列之间的边框样式。

    [ column-rule-color ]:设置或检索对象的列与列之间的边框颜色。

.test{
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:10px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:10px solid #090;
column-count:3;
column-gap:20px;
column-rule:10px solid #090;
}

设置或检索对象的列与列之间的边框厚度。

column-rule-width:<length> | thin | medium | thick

    <length>:用长度值来定义边框的厚度。不允许负值

    medium:定义默认厚度的边框。

    thin:定义比默认厚度细的边框。

    thick:定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

column-rule-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    none:无轮廓。column-rule-color与column-rule-width将被忽略

    hidden:隐藏边框。

    dotted:点状轮廓。

    dashed:虚线轮廓。

    solid:实线轮廓

    double:双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值

    groove:3D凹槽轮廓。

    ridge:3D凸槽轮廓。

    inset:3D凹边轮廓。

    outset:3D凸边轮廓。

column-rule-color:<color>

设置或检索对象元素是否横跨所有列。

column-span:none | all

none:不跨列

all:横跨所有列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:3;
column-gap:20px;
column-rule:3px solid #090;
}
.test p{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}

效果:

CSS3多列Multi-column布局

设置或检索对象所有列的高度是否统一。

column-fill:auto | balance

    auto:列高度自适应内容

    balance:所有列的高度以其中最高的一列统一

.test{
width:600px;
border:10px solid #000;
-moz-column-count:2;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-moz-column-fill:balance;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
-webkit-column-fill:balance;
column-count:2;
column-gap:20px;
column-rule:3px solid #090;
column-fill:balance;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象之前是否断行。

column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素之前断行并产生新列

    always:总是在元素之前断行并产生新列

    avoid:避免在元素之前断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-before:always;
-webkit-column-break-before:always;
column-break-before:always;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象之后是否断行。

column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素之后断行并产生新列

    always:总是在元素之后断行并产生新列

    avoid:避免在元素之后断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-after:always;
-webkit-column-break-after:always;
column-break-after:always;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象内部是否断行。

column-break-inside:auto | avoid | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素内部断行并产生新列

    avoid:避免在元素内部断行并产生新列

© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼 ⋅ 2016/11/13 ⋅ 0

HTML前端开发之路——多列布局

利用多列布局的属性可以轻松的为文字或者图片添加瀑布流效果; 首先看一下多列布局的属性总览: column-width属性简介 2.column-count属性简介 3.column属性简介 4.column-gap属性简介 5.co...

LeslieMay ⋅ 2016/02/12 ⋅ 0

瀑布流布局网页的浅析

简介 如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊? 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,...

小编辑 ⋅ 2011/09/14 ⋅ 6

瀑布流布局浅析

如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊? 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街...

柒月-小妖精 ⋅ 2013/03/27 ⋅ 0

css3学习笔记

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 ...

effto ⋅ 2016/08/15 ⋅ 0

25 个 CSS3 高级用户界面特效教程

1、SVG & CSS 交互图表 该教程将让你对 SVG 效果创建与交互有一定了解。 2、CSS3 3D 动画直方图 该教程将叫你创建一个完整的 3D 直方图。你需要遵循一些要求,使直方图有独立的背景,能够自适...

彭博 ⋅ 2013/04/09 ⋅ 19

css3简单知识学习

CSS3简单学习 倾斜div div { transform:rotate(30deg); } css3圆角边框 div { border:2px solid; border-radius:25px; -moz-border-radius:25px; / Old Firefox / } 边框阴影 div { box-shad......

writeademo ⋅ 2016/08/02 ⋅ 0

css3全部样式兼容性大纲

前言 本文对所有的css3特性浏览器的支持性进行了全量枚举,希望对项目的技术选型以及兼容方案有所帮助,对css3采用正确的打开方式。 测试环境: Chrome, Firefox, Internet Explorer 8 ,IE-...

Tolonger ⋅ 01/05 ⋅ 0

我淘到的各种jQuery Grid网格插件

如今,绝大多数网站都要依靠网格来进行布局,拥有一些好的Grid网格布局插件能大大地节约开发时间,还能在满足响应式布局的同时拥有迷人的外观。接下来,小编带大家来认识15款非常棒的响应式j...

lanmeimei ⋅ 2014/03/05 ⋅ 0

前端常用CSS小技巧

Genius only means hard-working all one's life. 注意:以下前缀兼容性写法注释 -o-:Opera -ms://IE10 -moz://火狐 -webkit://Safari 4-5, Chrome 1-9 17. 实现按比例计算浅红到深红的颜...

Neuro_annie ⋅ 2017/11/21 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 19分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 21分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 22分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 36分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 40分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 43分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 43分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 43分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 44分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 44分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部