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. Python全栈之路8--迭代器(iter)和生成器(yield)

    一.生成器( iter ) 从Python2.2起,生成器提供了一种简洁的方式帮助返回列表元素的函数来完成简单和有效的代码. 它基于yield指令,允许停止函数并立即返回结果.此函数保存其执行上下文, ...

  2. linux特殊符号大全

    #   ;   ;;      .      ,       /       \       'string'|       !   $   ${}   $?      $$   $*  " ...

  3. PHP 常用字符串函数整理

    PHP语言中的字符串函数也是一个比较易懂的知识.今天我们就为大家总结了将近12种PHP字符串函数,希望对又需要的朋友有所帮助,增加读者朋友的PHP知识库. 1.查找字符位置函数 strpos($str ...

  4. 如何通过maven ，将本地jar 安装到仓库中去。

    场景: 现在很多公司,都有 maven 的私服 ,在maven项目中,基本上有两个仓库 ,一个是maven的公共仓库,一个是私服仓库: 有的时候,我们download 别人的代码的时候,pom文件中报 ...

  5. snmp switch traffic交换机带宽

    上代码 <?php function getstr1($strall,$str1,$str2,$html_charset='utf-8'){ $i1=mb_strpos($strall,$str ...

  6. 用T-sql 实现Oracle Connect by 的功能

    ; with subDepartment as ( select BesonDepartmentID, DepartmentName, ParentBesonDepartmentID, 1 as Hi ...

  7. textarea 在不同浏览器高宽不一致的兼容性问题

    在html,很多同学喜欢使用rows.cols,来设置textarea的高宽,却发现,在火狐跟其他浏览器,好像高宽却不一致! 因为这是火狐的一个bug, https://bugzilla.mozill ...

  8. Grandpa's Estate---POJ1228(凸包)

    http://poj.org/problem?id=1228 学长说这是稳定凸包,我感觉就是凸包嘛. 所谓稳定就是判断能不能在原有凸包上加点,得到一个更大的凸包,并且这个凸包包含原有凸包上的所有点.知 ...

  9. 【洛谷P1941】飞扬的小鸟

    f [ i ] [ j ] 表示横坐标为 i ,高度为 j 时的最小点击次数 分别dp处理: 1.上升,(1)<m (2)>=m 2.下降 3.管道 #include<cstdio& ...

  10. Spring IoC小结

    一. IoC是什么 Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象 ...