CSS3 多列

CSS3可以将文本内容设计成像报纸一样的多列布局,如下实例:

CSS3 多列_第1张图片

一、多列的属性

以下几个为CSS3的多列属性:

·column-count

·column-gap

·column-rule-style

·column-rule-width

·column-rule-color

·column-rule

·column-span

·column-width

二、创建多列

column-count属性指定了需要分割的列数。以下实例将

元素中的文本分为3列

代码例子:

CSS3 多列_第2张图片

CSS3 多列_第3张图片

运行效果:

三,多列属性的实现

CSS3多列属性

下表列出了所有CSS3的多列属性:

CSS3 多列_第4张图片

代码实现:

CSS3 多列_第5张图片

实现效果:

你可能感兴趣的:(CSS3 多列)