推荐阅读
  • CSS3 过渡

    .animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf

  • CSS3 动画

    [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a

  • CSS3 多列

    CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */

  • CSS3 2D 转换

    CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 按钮

    .w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-tran

  • CSS3 3D 转换

    [mystyle] #rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 渐变

    CSS3 渐变(Gradients) 渐变效果 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。 CSS3 定义了两种类型的渐变(gra

  • CSS3 背景

    CSS3 背景 CSS3 背景 CSS3 中包含几个新的背景属性,提供更大背景元素控制。 在本章您将了解以下背景属性: background-image background-size background-origin background-clip 您还将学习如何使用多重背景图像。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -m

  • CSS3 多媒体查询

    CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置

  • CSS3 框大小

    CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord

CSS3 多列

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

爱学习网教程 - 学的不仅是技术,更是梦想!爱学习网教程(www.lvstudy.com )提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。

浏览器支持

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

紧跟在数字后面的 -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 -webkit11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.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 的简写属性。
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图