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. android之RadioGroup

    radioGroup这控件在开发中也是常用到的 RadioGroup 有时候比较有用．主要特征是给用户提供多选一机制. 用微信举一个例子吧! <?xml version="1.0&qu ...

  2. iOS.ReactNative-2-bridge-and-react-native-app-execution

    Bridge and React Native App Execution 基于0.18.1 Async batched bridge used to communicate with the Jav ...

  3. 使用 IntraWeb (38) - TIWAppForm、TIWForm、TIWBaseHTMLForm、TIWBaseForm

    窗体 TIWAppForm 所在单元及继承链: IWAppForm.TIWAppForm 主要成员: property OnURLRequest: TOnURLRequest //响应下面的 DoUR ...

  4. sqlite中的replace、insert、update之前的区别

    本文转自http://www.ithao123.cn/content-933827.html,在此感谢作者 android数据库操作,有两种方式,一种用android提供给我们的数据库操作函数inse ...

  5. MVC+ajax权限管理

    不喜欢说废话,直接了当: 1.控制器 /// <summary> /// 获取列表 /// </summary> /// <returns></returns ...

  6. BigDecimal 运算

    BigDecimal类 双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的数进行运算和处理.Java在java.math包中提供的API类BigDecimal,用来对 ...

  7. java for循环和数组--冒泡排序、二分查找法

    //100以内与7相关的数   for(int a=1;a<=100;a++){    if(a%7==0||a%10==7||a/10==7){     System.out.print(a+ ...

  8. Jade之条件语句

    条件语句 jade支持js中的if/elseif/else语法. jade: - var user = { description: 'foo bar baz' } - var authorised ...

  9. html+css知识整理

    1.学网页最好的方法:学习别人的网页. 2.文档结构 <html>(超文本标记语言) <head>  <title>     </title>    & ...

  10. (原创)学习MCU的感悟_初级(MCU，经验)

    1.Abstract     想了许多,不知道怎么开始,这算是学习和应用MCU的第四个年头了:过程虽然坎坎坷坷,但仍然还是坚持到了今天,也总算是折腾入行了.为了写的还是能够读下去,还特意写了一个小提纲 ...