码迷,mamicode.com
首页 > Web开发 > 详细

css3多列显示

时间:2015-01-06 13:28:44      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

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多列显示

标签:

原文地址:http://www.cnblogs.com/jalja/p/4205709.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!