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. notepad++对systemverilog的支持

    找到notepad++根目录中的"langs.xml",用notepad++打开,并搜索"verilog",     找到后,修改后面那句话为ext=" ...

  2. Tornado sqlalchemy

    上篇文章提到了,最近在用 Python 做一个网站.除了 Tornado ,主要还用到了 SQLAlchemy.这篇就是介绍我在使用 SQLAlchemy 的过程中,学到的一些知识. 首先说下,由于最 ...

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

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

  4. Android编译环境搭建（0818-0819）

    1 在虚拟机VMware上安装64位Ubuntu14.04LTS 首先需要安装虚拟机并激活.然后新建虚拟机,选择使用下载好的Ubuntu镜像.注意需要将光驱改为自己下载的,而不是autoinst.is ...

  5. Windows平台使用Gitblit搭建Git服务器图文教程

    Git服务现在独树一帜,相比与SVN有更多的灵活性,最流行的开源项目托管网站Github上面,如果托管开源项目,那么就是免费使用的,但是闭源的项目就会收取昂贵的费用,如果你不缺米,那么不在本文讨论的范 ...

  6. 教你理解Fragment

    定义 Fragment 表示 Activity 中的行为或用户界面部分.我们可以将多个片段组合在一个 Activity 中来构建多窗口UI,以及在多个 Activity 中重复使用某个片段.可以将片段 ...

  7. FreeBSD_11 - 系统管理——{ Part_5 - ZFS }

    参考資料 http://docs.oracle.com/cd/E37934_01/html/E36658/toc.html https://www.freebsd.org/doc/en_US.ISO8 ...

  8. 【树上莫队】【带修莫队】【权值分块】bzoj4129 Haruna’s Breakfast

    #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...

  9. Python3学习(2)-中级篇

    Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 切片:取数组.元组中的部分元素 L=['Jack','Mick','Leon','Jane','A ...

  10. EDMA3随笔

    最近查DM814x上两个M3莫名其妙挂掉的问题查了将近两周,最后发现居然是各个模块的dma乱用引起的. A8上的音频mcasp用了两个dma通道…… TI给的simcop里面imx实现的swosd又用 ...