css3学习笔记之多列
CSS3 创建多列
column-count 属性指定了需要分割的列数。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.newspaper
{
-webkit-column-count:6; /* Safari and Chrome */
}
</
style
>
</
head
>
<
body
>
<
p
><
b
>注意:</
b
> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</
p
>
<
div
class
=
"newspaper"
>
“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</
div
>
</
body
>
</
html
>
|
CSS3 多列中列与列间的间隙
column-gap 属性指定了列与列间的间隙。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.newspaper
{
-webkit-column-count:3; /* Safari and Chrome */
-webkit-column-gap:40px; /* Safari and Chrome */
}
</
style
>
</
head
>
<
body
>
<
p
><
b
>注意:</
b
> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</
p
>
<
div
class
=
"newspaper"
>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</
div
>
</
body
>
</
html
>
|
CSS3 列边框
column-rule-style 属性指定了列与列间的边框样式：
column-rule-width 属性指定了两列的边框厚度:
column-rule-color 属性指定了两列的边框颜色：
column-rule 属性是 column-rule-* 所有属性的简写。（可以直接用这个，看例子）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.newspaper
{
-webkit-column-count:3;
-webkit-column-gap:40px;
-webkit-column-rule:10px dotted red;
/*3个参数分别代表边框的厚度、样式以及颜色*/
/*solid 实线 dotted虚线*/
}
</
style
>
</
head
>
<
body
>
<
p
><
b
>注意:</
b
> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</
p
>
<
div
class
=
"newspaper"
>
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</
div
>
</
body
>
</
html
>
|
指定元素跨越多少列
column-span:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.newspaper
{
-webkit-column-count:3; /* Safari and Chrome */
}
h2
{
-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
>
|
指定列的宽度
column-width 属性指定了列的宽度。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
.newspaper
{
-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
>
|
CSS3 多列属性
下表列出了所有 CSS3 的多列属性：
| 属性 | 描述 |
|---|---|
| column-count | 指定元素应该被分割的列数。 |
| column-fill | 指定如何填充列 |
| column-gap | 指定列与列之间的间隙 |
| column-rule | 所有 column-rule-* 属性的简写 |
| column-rule-color | 指定两列间边框的颜色 |
| column-rule-style | 指定两列间边框的样式 |
| column-rule-width | 指定两列间边框的厚度 |
| column-span | 指定元素要跨越多少列 |
| column-width | 指定列的宽度 |
| columns | 设置 column-width 和 column-count 的简写 |