小白教程
所有教程
关于
Search
172.70.178.130
172.70.178.130
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS3 多列”的源代码
本页内容
上一节:
CSS3_动画
下一节:
CSS3_用户界面
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 多列}}[[Category:CSS 教程|53]] = CSS3 多列 = CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 小白教程 - 学习使人快乐!小白教程(www.xiaobai.wang)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。 == 浏览器支持 == 表格中的数字表示支持该方法的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |- | column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |- | column-rule | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit-11.1 |- | column-rule-color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |- | column-rule-style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |- | column-rule-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |- | column-width | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit11.1 |} == CSS3 多列属性 == 本章节我们将学习以下几个 CSS3 的多列属性: * <code>column-count</code> * <code>column-gap</code> * <code>column-rule-style</code> * <code>column-rule-width</code> * <code>column-rule-color</code> * <code>column-rule</code> * <code>column-span</code> * <code>column-width</code> == CSS3 创建多列 == <code>column-count</code> 属性指定了需要分割的列数。 以下实例将 <div> 元素中的文本分为 3 列: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> “当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。” </div> </body> </html> </run> == CSS3 多列中列与列间的间隙 == <code>column-gap</code> 属性指定了列与列间的间隙。 以下实例指定了列与列间的间隙为 40 像素: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-gap: 40px; /* Chrome, Safari, Opera */ -moz-column-gap: 40px; /* Firefox */ column-gap: 40px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { column-count:3; column-gap:40px; } </style> </head> <body> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> </body> </html> </run> == CSS3 列边框 == <code>column-rule-style</code> 属性指定了列与列间的边框样式: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */ -moz-column-rule-style: solid; /* Firefox */ column-rule-style: solid; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:dotted; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:dotted; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:dotted; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> <code>column-rule-width</code> 属性指定了两列的边框厚度: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { /* Chrome, Safari, Opera */ -webkit-column-count: 3; -webkit-column-gap: 40px; -webkit-column-rule-style: outset; -webkit-column-rule-width: 1px; /* Firefox */ -moz-column-count: 3; -moz-column-gap: 40px; -moz-column-rule-style: outset; -moz-column-rule-width: 1px; column-count: 3; column-gap: 40px; column-rule-style: outset; column-rule-width: 1px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> <code>column-rule-color</code> 属性指定了两列的边框颜色: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */ -moz-column-rule-color: lightblue; /* Firefox */ column-rule-color: lightblue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { column-count:3; column-gap:40px; column-rule-style:outset; column-rule-color:#ff0000; /* Firefox */ -moz-column-count:3; -moz-column-gap:40px; -moz-column-rule-style:outset; -moz-column-rule-color:#ff0000; /* Safari and Chrome */ -webkit-column-count:3; -webkit-column-gap:40px; -webkit-column-rule-style:outset; -webkit-column-rule-color:#ff0000; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> <code>column-rule</code> 属性是 column-rule-* 所有属性的简写。 以下实例设置了列直接的边框的厚度,样式及颜色: == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ column-rule:4px outset #ff00ff; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> == 指定元素跨越多少列 == 以下实例指定 <h2> 元素跨越所有列: == <sample title="" desc="" lang="html" hererun="1"> h2 { -webkit-column-span: all; /* Chrome, Safari, Opera */ column-span: all; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { column-count:3; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } h2 { column-span:all; -webkit-column-span:all; /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> <h2>英国维斯米斯特教堂碑文</h2> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> == 指定列的宽度 == <code>column-width</code> 属性指定了列的宽度。 == <sample title="" desc="" lang="html" hererun="1"> div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ column-width: 100px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> .newspaper { column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。 </div> </body> </html> </run> == CSS3 多列属性 == 下表列出了所有 CSS3 的多列属性: {| class="table table-striped table-hover" ! 属性 ! 描述 |- | [[css3 pr column count|column-count]] | 指定元素应该被分割的列数。 |- | [[css3 pr column fill|column-fill]] | 指定如何填充列 |- | [[css3 pr column gap|column-gap]] | 指定列与列之间的间隙 |- | [[css3 pr column rule|column-rule]] | 所有 column-rule-* 属性的简写 |- | [[css3 pr column rule color|column-rule-color]] | 指定两列间边框的颜色 |- | [[css3 pr column rule style|column-rule-style]] | 指定两列间边框的样式 |- | [[css3 pr column rule width|column-rule-width]] | 指定两列间边框的厚度 |- | [[css3 pr column span|column-span]] | 指定元素要跨越多少列 |- | [[css3 pr column width|column-width]] | 指定列的宽度 |- | [[css3 pr columns|columns]] | column-width 与 column-count 的简写属性。 |}
返回至“
CSS3 多列
”。
上一节:
CSS3_动画
下一节:
CSS3_用户界面