columen-width:定义单列显示的宽度。初始值是auto，适用于不可替代的块级元素，行内块元素和单元格，表格元素除外。

目前Webkit引擎支持-webkit-column-width，Mozilla Gecko引擎支持 -moz-column-width；

作用：如果页面内容能够在单列显示就在单列显示，如果页面宽度足够宽，就多列显示。

column-count：

定义单列显示列数。初始值是auto，适用于不可替代的块级元素，行内块元素和单元格，表格元素除外。

目前Webkit引擎支持-webkit-column-count，Mozilla Gecko引擎支持 -moz-column-count；

作用：无论浏览器页面宽度是多少，始终都按照定义的列数显示。

column-gap：

定义列的间距。初始值是normal（1em），适用于不可替代的块级元素，行内块元素和单元格，表格元素除外。

目前Webkit引擎支持-webkit-column-gap，Mozilla Gecko引擎支持 -moz-column-gap；

作用：定义列之间的距离。

column-rule：<length>|<style>|<color>|<transparent>(边框透明度)

定义列边框的样式。适用于不可替代的块级元素，行内块元素和单元格，表格元素除外。

目前Webkit引擎支持-webkit-column-rule，Mozilla Gecko引擎支持 -moz-column-rule；

作用：定义列边框的样式。

例如：虚线灰色边框

-webkit-column-rule:dashed 1px gray;
                   -moz-column-rule:dashed 1px gray;
                    column-rule:dashed 1px gray;

column-span:定义跨列显示  初始值1 适用于静态的、飞浮动元素。all 值横跨所有列，并定位在列Z轴上。

目前Webkit引擎支持-webkit-column-span，Mozilla Gecko引擎支持 -moz-column-span；

column-fill：定义列高 初始值balance：适用于多列布局元素，各列的高度会根据内容最多的那一行的高度进行统一。

auto：各列的高度随其内容的变化而自动变化。

目前Webkit引擎支持-webkit-column-fill，Mozilla Gecko引擎支持 -moz-column-fill；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3多列显示</title>
<style type="text/css" media="screen">
body{
/*定义列宽为300像素，则网页中每个栏目的最大宽度为300px*/
-webkit-column-width: 300px;
-moz-column-width:300px;
column-width:300px;
}

h1{color:#333333;padding:5px 8px;font-size:20px;text-align:center;padding:12px;

/*跨列显示*/
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}
h2{font-size:16px;text-align:center;
/*跨列显示*/
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

p{color:#333333;font-size:14px;line-height:180%;text-indent:2em;}
</style>
</head>
<body>
<h1>《管道的故事》</h1>
<h2>贝克.哈吉斯</h2>
<p>
在新经济里，如何让一个人都可以建立一个持续世袭收入的管道？你可以成为邻家的百万富
翁！
亲爱的读者：
一百年前，普通人几乎不可能成为百万富翁。来看看这份在20世纪所做的生活水平状况调查
统计：在1900年，美国的平均薪水是每小时0。22美元，一般工人的年收入在200美元至多400
美元之间，处于当时的贫困线下。那时全美只有6%的高中毕业，平均寿命47岁。只有14%的家
庭拥有浴缸。全美只有8000部汽车，铺好的路面也只有144英里。直到第一次世界大战时，美
国普通家庭将收入的80%用在食物、住房、穿衣等基本需求上。
总的来说，100年前基本上只有两个经济阶层：富有阶层和其他阶层。10个家庭中只有一个
是富有阶层。他就是说，在1900年美国有90%的人被划分为贫困阶层。
中产阶级依然靠工资生活
现将镜头从百年前转向2001年。
现在，一般家庭的收入为47000美元。小汽车的数目超过了人口数目。大多数家庭至少拥有
二部电视。寿命长至75岁。现在，一般人有比以前更多可支配的收入，有更多的空余时间，有
更多的职业选择。
然而全美约7200万家庭的大部份依然靠工资生活。
除去家里住房、车及家具，一般的家庭资产为零。零！当收入增加时，家庭负债在增加，工
作时间也在增加。
哪里出了错？
你是否加入了一个错误的系统？
问题在于许多人加入了一个错误的计划当中。他们进入了一个错误的系统，缺乏如何建立和
积累财富的基本知识。
今天我要做一个或许会让你震惊的大胆声明。但这是绝对真实，且豪不含糊的。准备好了吗？
简单的、无须修饰的事实就是，今天，成为一名百万富翁是一种选择，而非机会。
是真的——今天，任何一个有中产阶级收入的人都可以成为一名百万富翁。不可能？不。事实上，
它很简单。
如果你今天想成为一名百万富翁，你所需要做的只是跟随以下三个步骤：
1． 明白财富是如何建立和积累的；
2． 复制已经被认实的建立财富的系统；
3． 在一段时间内持续不懈；
就这么多。这就是普通人积累百万资产所需要做的：认识、复制、坚持。
</p>
</body>
</html>

css3多列显示的更多相关文章

  1. CSS3 之 flexbox 响应式的未来

    CSS3 之 flexbox 响应式的未来 flexbox 伸缩盒模型 . flex: CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大. . flex布局:旨在提供一个更 ...

  2. CSS3 布局

    1.1 列布局   CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时 ...

  3. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. css3的2D和3D的转换

    一:2D转换: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移 ...

  5. 学习笔记 第十三章 使用CSS3新布局

    第13章   使用CSS3新布局 [学习重点] 设计多列布局 设计弹性盒布局样式 使用CSS3布局技术设计适用移动需求的网页 13.1  多列布局 CSS3使用columns属性定义多列布局,用法如下 ...

  6. IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

    本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  8. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  9. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

随机推荐

  1. git 使用命令总结

    当远程仓库有README.md的时候我们创建的工程里没有这个文件这时候你提交的仓库和远程的不一致就会导致提交被拒绝 此时我们可以先拉取主干到本地的temp分支  然后和本地的master分支合并 通过 ...

  2. centos6.5 安装cmake 3.3.2

    os:centos6.5 cmake版本:3.3.2 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 下载cmake 使用wget工具 ...

  3. Log4j基本用法----日志级别

    基本使用方法: Log4j由三个重要的组件构成:日志信息的优先级,日志信息的输出目的地,日志信息的输出格式.日志信息的优先级从高到低有ERROR.WARN.INFO.DEBUG,分别用来指定这条日志信 ...

  4. Navicat for Oracle 连接oracle 配置

    oci.dll  替换为对应oracle版本的oci.dll

  5. DNS主从TSIG加密传输

    BIND服务程序为了能够安全的提供解析服务而支持了TSIG加密机制,TSIG主要是利用密码编码方式保护区域信息的传送(Zone Transfer),也就是说保证了DNS服务器之间传送区域信息的安全. ...

  6. [转载～笔记]CentOS单独编译安装PHP gd库扩展

    http://www.nowamagic.net/librarys/veda/detail/2610 安装gd前置库: freetype, jpegsrc, libpng 1. freetypewge ...

  7. 真正意义上的spring环境中的单元测试方案spring-test与mokito完美结合

    真正意义上的spring环境中的单元测试方案spring-test与mokito完美结合 博客分类: java 测试 单元测试SpringCC++C#  一.要解决的问题:     spring环境中 ...

  8. [转]MySQL主从复制原理介绍

    MySQL主从复制原理介绍 一.复制的原理 MySQL 复制基于主服务器在二进制日志中跟踪所有对数据库的更改(更新.删除等等).每个从服务器从主服务器接收主服务器已经记录到其二进制日志的保存的更新,以 ...

  9. HDU 5024 Wang Xifeng's Little Plot (DP)

    题意:给定一个n*m的矩阵,#表示不能走,.表示能走,让你求出最长的一条路,并且最多拐弯一次且为90度. 析:DP,dp[i][j][k][d] 表示当前在(i, j)位置,第 k 个方向,转了 d ...

  10. CSS定位之position详解(转载)

    本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html  position属性 在前端中,position是很常见的属性.通过这 ...