CSS3 多列
2016-01-25 00:00
288 查看
摘要: CSS3 多列
在本章中,您将学习如下多列属性:
column-count
column-gap
column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注意: Internet Explorer 9 以及更早的版本不支持多列属性。
原文地址:http://www.phplearn.cn/css3/css3-multiple-columns.html
CSS3 多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!在本章中,您将学习如下多列属性:
column-count
column-gap
column-rule
浏览器支持
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注意: Internet Explorer 9 以及更早的版本不支持多列属性。
CSS3创建多列
column-count属性指定元素的列数应分为:划分成三列的div元素的文本: div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }
CSS3的指定列之间的差距
column-gap属性指定的列之间的差距:指定列之间40个像素差距: div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; }
CSS3列规则
column-rule属性设置列之间的宽度,样式和颜色。指定列之间的宽度,样式和颜色的规则: div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ column-rule:3px outset #ff00ff; }
原文地址:http://www.phplearn.cn/css3/css3-multiple-columns.html
相关文章推荐
- CSS3 用户界面
- 修改progressbar的样式
- 纯CSS实现的表格滚动条效果
- CSS块级元素、内联元素概念
- CSS float 属性
- css3 box-shadow
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS那些事儿-阅读随笔2(选择符的组合与优先级/权重)
- html+css制作简易版Baymax
- 用css伪元素实现tooltip效果
- CSS+DIV:理论实战缺一不可
- css学习之id和class选择器
- 使用css垂直水平居中
- css学习之css语法
- CSS 布局 问题 及 解答
- LaTex 单栏样式模板中插入双栏表格
- css学习笔记20160120链接列表表格
- 读书笔记 精通CSS 高级Web标准解决方案(第2版)1~3章
- 我的网页搭建中篇02——网页布局01
- CSS实现文字随屏幕变化