在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. 类 的重载（Overloads）与隐藏（Shadows）

    我在上篇文章中讲解了类 的继承和重写,如果想要在派生类中重写基类了方法或函数,那首先基类必须要有用 Overridable 关键字的公开声明的方法或函数,这样,基类的派生类才能用 Overrides ...

  2. C++标准程序库读书笔记-第四章通用工具

    1.Pairs(对组) (1)class pair可以将两个值视为一个单元.任何函数需返回两个值,也需要pair. (2)便捷地创建pair对象可以使用make_pair函数 std::make_pa ...

  3. Java转换

    1.如何将字符串String转化为整数int  int i = Integer.parseInt(str);   int i = Integer.valueOf(my_str).intValue(); ...

  4. 日志管理-将Log4net的配置配置到的独立文件中

    转自:http://www.cnblogs.com/zfanlong1314/p/3662679.html使用log4net已经很久了.但从来没有详情了解log4的参数,及具体使用方法.看了周公的博客 ...

  5. AspectJ的安装和Eclipse的AJDT插件的配置

    一.安装AspectJ:1.从http://www.eclipse.org/aspectj/downloads.php  下载AspectJ(目前发布的最新版为1.8.6);2.解压下载下来的jar文 ...

  6. glusterFS的缓存测试

    众所周知,glusterFS在客户端有缓存,缓存目的在于提高读性能.那么多个客户端同时对文件进行读写,会不会存在client缓存与server文件不一致的情况?比如client A和client B读 ...

  7. python socket编程学习笔记2

     server.py: [服务端步骤]: 1.创建socket对象 2.将socket绑定到指定地址(bind) 3.监听连接请求(listen) 4.等待客户请求(accept) 5.处理请求(服务 ...

  8. Arduino红外遥控系列教程2013——红外转码

    教程三:红外转码教程——用电视遥控器取代机顶盒遥控器 前言前段时间看到了使用红外遥控的X-Bot机器人[链接],感觉很有意思.最近开始玩Arduino与红外,一方面打算将来用于BOXZ的之间的通讯控制 ...

  9. Delphi获取系统服务描述信息

    program Project1; {$APPTYPE CONSOLE} uses Windows, WinSvc; type SERVICE_DESCRIPTION = packed record ...

  10. SecureCRT按退格键出现^H问题解决

    解决办法一: 解决办法二: ctrl+backspace.即是返回