CSS3 多列

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

一、多列的属性

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

·column-count

·column-gap

·column-rule-style

·column-rule-width

·column-rule-color

·column-rule

·column-span

·column-width

二、创建多列

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

元素中的文本分为3列

代码例子：

运行效果：

三，多列属性的实现

CSS3多列属性

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

代码实现：

实现效果：

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3多列布局(column*)
    浅谈CSS3多列布局 相信大家都看过报纸，报纸上的内容大多数都是分栏显示的，如下图所示： 现在，强大的CSS3为我...
    haileym阅读 2,318评论 0赞 0
  • CSS3 多列
    CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: 浏览器支持 表格中的数字表示支持该...
    鹿守心畔光阅读 214评论 0赞 1
  • CSS3 多列
    1多列 创建多个列来对文本进行布局 - 就像报纸那样 1-1 创建多列 column-count 属性规定元素应该...
    随意人生_1b90阅读 201评论 0赞 0
  • CSS3多列
    创建多列 column-count 属性规定元素应该被分隔的列数： 实例 1.column-count: numb...
    safiriGitHub阅读 529评论 0赞 0
  • 本年还剩一个月了又怎么样？
    我不是一个特别在意仪式感的人，所以对于某一天是什么日子之类的很不敏感。 比如今天是十二月的第一天，比如上周五是感恩...
    理想与你同在阅读 1,709评论 10赞 26