推荐阅读
  • CSS3 字体

    CSS3 字体 CSS3 @font-face 规则 使用以前 CSS 的版本,网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3,网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您“自己的”的字体是在 CSS3 @

  • CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 本教程向您讲解 CSS3 中的新特性。 开始学习 CSS3! CSS3 实例 [mycode3 type='css'] div { transform:rotate(30deg); } [/mycode3] 尝试一下 » 点击 '尝试一下' 按钮查看

  • 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 按钮

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

  • CSS3 多媒体查询实例

    CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html><html><head><style>ul {  &nbs

  • CSS3 图片

    CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩

  • CSS3 弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器

  • 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 用户界面

    CSS3 用户界面 CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

  • CSS3 分页

    CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li

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 © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图