在CSS3中，也新增了一些关于文本布局的几个比较简单的属性。通过这些新增的属性，我们可以对文本进行简单的排版，就想报纸和杂志那样。

新增的部分属性，以及浏览器支持情况：

属性 浏览器支持
column-count IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-gap IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera
column-rule IE Firefox(-moz-) Chrome(-webkit-) Safari(-webkit-) Opera

注：

  • 在Firefox浏览器中，要加(-moz-)前缀。
  • 在Chrome和Safari浏览器中，要加(-webkit-)前缀。
  • 对于IE浏览器，只支持IE10以及以上版本。

新增的属性以及描述：

属性 描述
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 的简写属性

通过这几个新增属性的定义，我可以对文本进行简单的排版(Firefox浏览器)

*{

	-moz-column-count: 3;

	-moz-column-gap: 40px;

	-moz-column-rule: 4px outset #ff0000;"

}

上面的CSS样式是元素中的文本分为3列，列之间的距离为40px，列之间用颜色为#ff0000、宽度为4px的线分开。

同样，我们也可以对一些元素中的内容进行排版。

例如我们可以对列表进行排版：

部分代码为(Firefox浏览器)：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style>

ul {

	-moz-column-count: 3;

	-moz-column-gap: 40px;

	-moz-column-rule: 4px outset #ff0000;

}

li {

	background: #0CF;

	border: #069 1px solid;

	display: inline-block;

	width: 150px;

	margin: 5px 0;

}

</style>

</head>

<body>

<ul>

	<li style="height:50px">1</li>

	<li style="height:100px">2</li>

	<li style="height:80px">3</li>

	<li style="height:60px">4</li>

	<li style="height:70px">5</li>

	<li style="height:50px">6</li>

	<li style="height:100px">7</li>

	<li style="height:80px">8</li>

	<li style="height:90px">9</li>

	<li style="height:30px">10</li>

</ul>

</body>

</html>

CSS自学笔记（15）:CSS3多列布局的更多相关文章

  1. CSS3 多列布局——Columns

    CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...

  2. css3 多列布局记

    css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...

  3. JAVA自学笔记15

    JAVA自学笔记15 @例题1:共有5个学生,请把五个学生的信息存储到数组中,并遍历数组,并获取每个学生的信息 Students[] students=new Student[5]; Student ...

  4. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  5. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...

  6. CSS3多列布局

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...

  7. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  8. css3 多列布局使用

    css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...

  9. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

随机推荐

  1. MYSQL5.6数据库ZIP安装以及VS中使用注意事项

    先挂资源,下载地址: http://download.softagency.net/MySQL/Downloads/. 找到MYSQL5.6,两个版本看系统而定我下的是64位的:http://down ...

  2. Leetcode算法刷题：第112题 Path Sum

    Path Sum 题目 给予一个二叉树,和一个值su,寻找是否有一个从根节点到叶节点的和为su,有则返回True,没有为False.比如: 5 / \ 4 8 / / \ 11 13 4 / \ \ ...

  3. 1002 Fire Net

    用递归实现各种情况的枚举,可以看做是考察DPS的简单实现. #include <stdio.h> ][]; int place(int x,int y){ int i; ;i--){ ) ...

  4. 九章算法系列（#5 Linked List）-课堂笔记

    前言 又是很长时间才回来发一篇博客,前一个月确实因为杂七杂八的事情影响了很多,现在还是到了大火燃眉毛的时候了,也应该开始继续整理一下算法的思路了.Linked List大家应该是特别熟悉不过的了,因为 ...

  5. python连接redis002

    例子001. 通过StrictRedis模式连接到redis.并调用get命令读取了一个string类型的值. #!/usr/bin/python #!coding:utf-8 import redi ...

  6. EF6.0 自定义Code First约定

    自定义Code First约定有三种方式,分别是:Lightweight Conventions(轻量级约定).Configuration Conventions(配置型约定).Model-based ...

  7. interbase C++Builder 简单例子

    interbase C++Builder  的例子,网上找了半天也没找到合适的,下面是一般能搜索到的文章,现在整理下: 下面我以interbase―――C++Builder,介绍一个简单的例子(不过很 ...

  8. C语言的本质（16）——函数接口的传入参数与传出参数

    如果函数接口有指针参数,既可以把指针所指向的数据传给函数使用(称为传入参数),也可以由函数填充指针所指的内存空间,传回给调用者使用(称为传出参数),例如strcpy的函数原型为 char *strcp ...

  9. linux之SQL语句简明教程---Alias

    接下来,我们讨论 alias (别名) 在 SQL 上的用处.最常用到的别名有两种: 栏位别名及表格别名. 简单地来说,栏位别名的目的是为了让 SQL 产生的结果易读.在之前的例子中,每当我们有营业额 ...

  10. vs2010中看不见类视图和资源视图的解决方法

    vs2010工程中,因为删除了“vcxproj.filter”文件,所以导致资源视图看不见了. 解决方法是:先关掉工程,将工程对应的扩展名为.suo和.sdf删除,重新打开解决方案,问题解决.