在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. P - A + B（第二季水）

    Description          读入两个小于100的正整数A和B,计算A+B.                 需要注意的是:A和B的每一位数字由对应的英文单词给出.             ...

  2. C++ primer学习记录(个人猜想未测试版本)

    学习版本:第五版. 本博文主要记录个人曾经并不知晓知识细节. 因为linux下的编译环境还未进行学习.所以实际代码测试将在今后完成. 红色:需确认. 蓝色:重点. 1)const对象设定为仅在文件内有 ...

  3. mySql-数据库之存储过程学习总结

    之前在工作中总是听别人提到存储过程,觉得是个很高深的东西,利用工作之余,看了下相关的知识,现将学习知识总结如下,希望可以为刚学习的人提供些许帮助. 开发环境:Navicat For Mysql. My ...

  4. js循环遍历

    //获取多个用户id 一般用在复选框 cust_id = 1,2,3,4; var str = cust_id.split(",");          for (var key ...

  5. 字符串水题（hdoj1049）

    Problem Description Password security is a tricky thing. Users prefer simple passwords that are easy ...

  6. UVA 12563 Jin Ge Jin Qu hao

    dp-背包 开始用普通dp写了一发发现没法确定最大时间... 后来看到大牛机智的写法,嗯...dp表示当前状态能否成立:然后从条件最好的状态开始遍历,直到这个状态成立然后退出遍历. 具体的看代码吧.. ...

  7. BootstrapTable+KnockoutJS实现增删改查解决方案

    BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一 ...

  8. Can someone explain Webpack's CommonsChunkPlugin

    I get the general gist that the CommonsChunkPlugin looks at all the entry points, checks to see if t ...

  9. JVM调优的几种策略（转）

    JVM参数调优是一个很头痛的问题,可能和应用有关系,别人说可以的对自己不一定管用.下面是本人一些JVM调优的实践经验,希望对读者能有帮助,环境LinuxAS4,resin2.1.17,JDK6.0,2 ...

  10. SQL Server 2008数据库的一些基本概念 区、页、行

    原文地址:http://www.cnblogs.com/liuzhendong/archive/2011/10/11/2207361.html 以前总是没弄明白这些基本概念,现在整理如下: 1.区: ...