>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → CSS3 多列布局

您是本文章第 27427 个阅读者

* 贴子主题: CSS3 多列布局

点赞(0) 收藏

作者:flybird 发表时间：2020-01-30 19:34:27

消息

查看

搜索

好友

邮件

复制

引用

CSS3 多列布局

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

.newspaper {

    border:1px black solid;

    padding: 15px;

    -webkit-column-count: 3; /* Chrome, Safari, Opera */

    -moz-column-count: 3; /* Firefox */

    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */

    -moz-column-gap: 40px; /* Firefox */

    column-gap: 40px;

    -webkit-column-rule: 1px solid lightgrey; /* Chrome, Safari, Opera */

    -moz-column-rule: 1px solid lightgrey; /* Firefox */

    column-rule: 1px solid lightgrey;

}

浏览器支持

     表格中的数字表示支持该方法的第一个浏览器的版本号。

     紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性
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 -webkit 11.1
column-rule-style	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1

CSS3 多列属性

下面介绍以下几个 CSS3 的多列属性:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3 创建多列

column-count

属性指定了需要分割的列数。

以下实例将 <div> 元素中的文本分为 3 列：

实例

          div {
          -webkit-column-count:  3;  /* Chrome, Safari, Opera */

          -moz-column-count:  3;  /* Firefox */

         column-count:  3;

         }

CSS3 多列中列与列间的间隙

column-gap

属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素：

实例

div{
    -webkit-column-gap:  40px;  /* Chrome, Safari, Opera */

   -moz-column-gap:  40px;  /* Firefox */

   column-gap:  40px;

    }

CSS3 列边框

column-rule-style 属性指定了列与列间的边框样式：

实例

div{
  -webkit-column-rule-style:  solid;  /* Chrome, Safari, Opera */

   -moz-column-rule-style:  solid;  /* Firefox */

   column-rule-style:  solid;

    }

column-rule-width 属性指定了两列的边框厚度:

实例

div{
   -webkit-column-rule-width:  1px;  /* Chrome, Safari, Opera */

   -moz-column-rule-width:  1px;  /* Firefox */

   column-rule-width:  1px;

    }

column-rule-color 属性指定了两列的边框颜色：

实例

div{
    -webkit-column-rule-color:  lightblue;  /* Chrome, Safari, Opera */

   -moz-column-rule-color:  lightblue;  /* Firefox */

   column-rule-color:  lightblue;

    }

column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度，样式及颜色：

实例

div{

   -webkit-column-rule:  1px solid lightblue;  /* Chrome, Safari, Opera */

   -moz-column-rule:  1px solid lightblue;  /* Firefox */

   column-rule:  1px solid lightblue;

    }

指定元素跨越多少列

以下实例指定 <h2> 元素跨越所有列：

实例

h2 {
   -webkit-column-span:  all;  /* Chrome, Safari, Opera */

   column-span:  all;

    }

指定列的宽度

column-width 属性指定了列的宽度。

实例

div {
   -webkit-column-width:  100px;  /* Chrome, Safari, Opera */

   column-width:  100px;

    }

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 的简写