在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. linux常用命令--diff

    diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...

  2. JavaMail简单接收邮件

    一个简单的例子,收取所有邮件并在控制台输出. package cn.jmail.test; import java.io.*; import java.util.*; import javax.mai ...

  3. Android进程

    android进程等级 1.前台进程 2.可视进程 3.服务进程 4.后台进程 5.空进程 让应用退出方式 finish();让应用成为空进程 Process.killProcess();杀进程 sy ...

  4. NHbiernate 配置

    1.从网上下载NHibernate 4.0 文件.下载地址:https://sourceforge.net/projects/nhibernate/ 2.解压后把 NHibernate.dll文件引用 ...

  5. MySQL索引背后的数据结构及最左原则

    MySQL索引原理 ##索引目的索引的目的在于提高查询效率,可以类比字典,如果要查“mysql”这个单词,我们肯定需要定位到m字母,然后从下往下找到y字母,再找到剩下的sql.如果没有索引,那么你可能 ...

  6. 使用jsp生成验证码

    在开发中验证码是比较常用到有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试的方式. 此演示程序包括三个文件: 1.index.jsp:登录页面 2.image.jsp:生成 ...

  7. SharedPreference对象及其xml文件

    SharedPreferences对象----->getXXX SharedPreferences.Editor对象---->putXXX

  8. X光机的原理及构造

    一.X射线的发现 1895年德国物理学家伦琴(W．C．RÖntgen)在研究阴极射线管中气体放电现象时,用年伦琴荣获物理学第一个诺贝尔奖金.科学总是在不断发展的,经伦琴及各国科学家的反复实践和研究,逐 ...

  9. 顶尖数据挖掘开发平台（TipDM-D2）产品白皮书

          顶尖数据挖掘开发平台 (TipDM-D2)           产  品  白  皮  书 广州泰迪智能科技有限公司 版权所有 地址: 广州市经济技术开发区科学城232号 网址: http ...

  10. cocos2d js 怎样动态载入外部图片

    官网没有详细样例,仅仅有看api,研究成果例如以下 var that = this; var url = "http://xxxxxx"; cc.loader.loadImg(ur ...