CSS3多列布局允许我们轻松创建多列。
以下三个属性用于在CSS3中配置列布局。
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
上面的代码呈现如下：
column-gap 属性指定列之间的间距：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>
上面的代码呈现如下：
column-rule属性在列之间设置规则的宽度，样式和颜色。
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff;
-moz-column-rule: 4px outset #ff00ff;
column-rule: 4px outset #ff00ff;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff;
-moz-column-rule: 4px outset #ff00ff;
column-rule: 4px outset #ff00ff;
}
</style>
</head>
<body>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
lectores legere me lius quod ii legunt saepius.
</div>
</body>
</html>以下示例使用列布局来定位无序列表项。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
margin-left: 5px;
width: 250px;
height: 100px;
-webkit-column-count: 2;
-khtml-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
li {
list-style: disc inside;
}
</style>
</head>
<body>
<ul>
<li>A</li><li>B</li><li>C</li><li>D</li>
<li>E</li><li>F</li><li>G</li><li>H</li>
<li>A</li><li>B</li><li>C</li><li>D</li>
<li>E</li><li>F</li><li>G</li><li>H</li>
</ul>
</body>
</html>
上面的代码呈现如下：
| 属性 | 描述 | CSS |
|---|---|---|
| column-count | 指定某个元素应分为的列数 | 3 |
| column-fill | 指定如何填充列 | 3 |
| column-gap | 指定的列之间的差距 | 3 |
| column-rule-color | 设置列之间的颜色 | 3 |
| column-rule-style | 设置列之间的样式 | 3 |
| column-rule-width | 设置列之间的宽度 | 3 |
| column-rule | 设置列之间的宽度，样式和颜色 | |
| column-span | 指定某个元素应该跨越多少列 | 3 |
| column-width | 指定列的宽度 | 3 |
| columns | 速记属性设置列宽和列数 | 3 |
使用 form 标签可以向服务器传输数据，该标签的使用示例如下：实例带有两个输入字段和一个提交按钮的 HTML 表单：form action="d...
ruby 标签是当作注释标签使用的，可以对文本进行注音或者字符，请参考下述示例： 实例一个 ruby 注释：ruby汉 rp(/rprtHan/rtrp)...
span 元素是无语义的行内元素，它可以对元素进行分组，使它们以不同的样式显示，请参考下述示例：实例使用 span 元素对文本中的...
tr 标签定义HTML表格中的一行单元格，它应该是成对出现的，请参考下述示例：实例一个简单的 HTML 表格，包含两列两行：table bor...
HTML video 标签muted 属性用来表示网页中的音频是否静音，如果设置，音频将被初始化为静音；其默认值为false，表示播放视频时将...
HTML video 标签width 属性用于设置视频显示区域的宽度，如下示例：实例具有指定高度和宽度的视频：video width="320" height="2...
HTML ol 标签type 属性用来规定HTML有序列表中序号的类型，包括大小写字母、阿拉伯数字和大小写罗马数字，请参考下述示例：实例...
HTML5 语义元素 语义= 意义. 语义元素 = 元素的意义.什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语...
实例HTML5 summary标签定义在details标签中的内容的标题。请参考下述示例：使用 summary 元素：detailssummaryCopyright 1999-20...
