浏览器支持
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 和 Chrome */
column-count:3;
}
CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔:
实例
规定列之间 40 像素的间隔:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
实例
规定列之间的宽度、样式和颜色规则:
div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }
新的多列属性
下面的表格列出了所有的转换属性:
column-count | 规定元素应该被分隔的列数。 | 3 |
column-fill | 规定如何填充列。 | 3 |
column-gap | 规定列之间的间隔。 | 3 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
column-rule-color | 规定列之间规则的颜色。 | 3 |
column-rule-style | 规定列之间规则的样式。 | 3 |
column-rule-width | 规定列之间规则的宽度。 | 3 |
column-span | 规定元素应该横跨的列数。 | 3 |
column-width | 规定列的宽度。 | 3 |
columns | 规定设置 column-width 和 column-count 的简写属性。 | 3 |
相关推荐
使用CSS3多列布局属性.ppt
CSS3多列手风琴效果
第28章 CSS3多列布局.pdf
NULL 博文链接:https://onestopweb.iteye.com/blog/2232129
多列等高的CSS实现.rar多列等高的CSS实现.rar多列等高的CSS实现.rar多列等高的CSS实现.rar多列等高的CSS实现.rar多列等高的CSS实现.rar
使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。 使用CSS3可以为你的网站创建多列,而不用为每列制定特定的层或段落。 上一篇文章:CSS3教程(5):网页背景图片 与多背景图片一样,CSS3多列也是我...
CSS3设计多列布局.pdf 学习资料 复习资料 教学资源
支持多列合并的 CSS Friendly GridView,每一列可以单独排序。表头固定
CSS3设计多列布局案例.pdf 学习资料 复习资料 教学资源
CSS3设置多列显示样式2.pdf 学习资料 复习资料 教学资源
CSS3设置多列显示样式1.pdf 学习资料 复习资料 教学资源
CSS3设置多列显示样式2案例.pdf 学习资料 复习资料 教学资源
CSS3设置多列显示样式1案例.pdf 学习资料 复习资料 教学资源
多列布局CSS多列布局继承自块级布局模式,允许简单地定义多列文本。 一行太长的文字读起来很麻烦;当人眼从一行过长的文字末端移动到下一行开始处,就容易弄错到底该读哪一行。因此,为了最优化使用大的显示屏幕,...
《html5与css3实战指南》由11章和3个附录组成,内容包括html5和css3简介、html5标记、html5语义、html5表单、html5音频和视频、css3渐变和多背景、css转换和过渡、嵌入字体和多列布局、地理定位、离线web应用和web...
本书提供了一个强大的配套网站,上面列出了书中的完整代码示例以及更多优秀实 例及进阶参考资料,以供读者参考学习。 通过学习本书,零起点读者即可创建网站,而中高级水平的开发人员也可以快速了解HTML5新元 素、 ...
Tailwind CSS多列插件 该插件添加了实用程序,可将所有多列属性与Tailwind CSS一起使用。 安装 将此插件添加到您的项目中: # Install using pnpm pnpm install --save-dev tailwindcss-multi-column # Install ...
1、怪异盒模型的简介 2、弹性盒模型和相关概念 3、Flex容器属性(添加在父级元素上的) 4、Flex项目属性(添加在子元素上的) 5、媒体查询的概念和应用 6、Responsive web design 响应式...7、CSS3多列布局