CSS3 可以将文本内容设计成像报纸一样的多列布局

㈠CSS3 多列属性

㈡column-count 属性

⑴语法：column-count: number|auto;

⑵值：

        

㈢column-gap 属性

⑴语法：column-gap: length|normal;

⑵值：

㈣column-rule-style 属性

⑴语法：column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

⑵值：

㈤column-rule-width 属性

⑴语法：column-rule-width: thin|medium|thick|length;

⑵值：

㈥column-span 属性

⑴语法：column-span: 1|all;

⑵值：

㈦column-rule 属性

⑴语法：column-rule: column-rule-width column-rule-style column-rule-color;

⑵值：

㈧column-width 属性

⑴语法：column-width: auto|length;

⑵值：

㈨案例演示

⑴将 div 元素中的文本分为三列，并规定列间 30 像素的间隔。

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:30px; /* Firefox */

-webkit-column-gap:30px; /* Safari and Chrome */

column-gap:30px;

}

</style>

</head>

<body>

<div class="newspaper">

人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。

此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。

通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。

通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。

</body>

</html>

效果图：

⑵column-gap指定了列与列间的间隙为 40 像素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>列与列的间隙</title>

<style>

.newspaper

{

    -moz-column-count:3; /* Firefox */

    -webkit-column-count:3; /* Safari and Chrome */

    column-count:3;

    -moz-column-gap:40px; /* Firefox */

    -webkit-column-gap:40px; /* Safari and Chrome */

    column-gap:40px;

}

</style>

</head>

<body>

<div class="newspaper">

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

</html>

效果图：

⑶column-rule-style 指定了列与列间的边框样式：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>边框样式</title>

<style>

.newspaper

{

    column-count:3;

    column-gap:40px;

    column-rule-style:dotted;

    /* Firefox */

    -moz-column-count:3;

    -moz-column-gap:40px;

    -moz-column-rule-style:dotted;

    /* Safari and Chrome */

    -webkit-column-count:3;

    -webkit-column-gap:40px;

    -webkit-column-rule-style:dotted;

}

</style>

</head>

<body>

<div class="newspaper">

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

效果图：

⑷column-rule-width 属性指定了两列的边框厚度:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>两列的边框厚度</title>

<style>

.newspaper {

    /* Chrome, Safari, Opera */

    -webkit-column-count: 3;

    -webkit-column-gap: 40px;

    -webkit-column-rule-style: outset;

    -webkit-column-rule-width: 1px;

    /* Firefox */

    -moz-column-count: 3;

    -moz-column-gap: 40px;

    -moz-column-rule-style: outset;

    -moz-column-rule-width: 1px;

    column-count: 3;

    column-gap: 40px;

    column-rule-style: outset;

    column-rule-width: 1px;

}

</style>

</head>

<body>

<div class="newspaper">

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

</html>

效果图：

⑸column-rule-color 属性指定了两列的边框颜色：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>边框颜色</title>

<style>

.newspaper

{

    column-count:3;

    column-gap:40px;

    column-rule-style:outset;

    column-rule-color:#ff0000;

    /* Firefox */

    -moz-column-count:3;

    -moz-column-gap:40px;

    -moz-column-rule-style:outset;

    -moz-column-rule-color:#ff0000;

    /* Safari and Chrome */

    -webkit-column-count:3;

    -webkit-column-gap:40px;

    -webkit-column-rule-style:outset;

    -webkit-column-rule-color:#ff0000;

}

</style>

</head>

<body>

<div class="newspaper">

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

</html>

效果图：

⑹以下实例指定 <h2> 元素跨越所有列：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>指定 <h2> 元素跨越所有列：</title>

<style>

.newspaper

{

    column-count:3;

    -moz-column-count:3; /* Firefox */

    -webkit-column-count:3; /* Safari and Chrome */

}

h2

{

    column-span:all;

    -webkit-column-span:all; /* Safari and Chrome */

}

</style>

</head>

<body>

<div class="newspaper">

<h2>英国维斯米斯特教堂碑文</h2>

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

</html>

效果图：

⑺column-width 属性指定了列的宽度。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>column-width 属性指定了列的宽度。</title>

<style>

.newspaper

{

    column-width:100px;

    -moz-column-width:100px; /* Firefox */

    -webkit-column-width:100px; /* Safari and Chrome */

}

</style>

</head>

<body>

<div class="newspaper">

当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。

</div>

</body>

</html>

效果图：

CSS3的多列属性的更多相关文章

  1. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

  2. jqGrid使用setColProp方法动态改变列属性

    在使用jqGrid插件时,有时我们需要动态改变列的属性,可使用setColProp方法,用法如下 jQuery(”#grid_id”).setColProp('colname',{editoption ...

  3. 学习笔记：MySQL列属性

    列属性 a)         null|not null 缺省值是null,也就是允许为空,如果是not null而又没有给该字段赋值的话,系统会首先查询该字段有没有默认值 b)         de ...

  4. mysql数据类型和列属性

    列属性: 定义一个字段时对该字段设置的额外的信息或约束 1.  关联操作:reference 2.  字段默认值:default value 3.  主索引和唯一索引:primary key 和uni ...

  5. SQL语句实现取消自增列属性

    SQL语句实现取消自增列属性 --由于在SQL-SERVER中,自增列属性不能直接修改,但可以通过以下方式变向实现 --1.如果仅仅是指定值插入,可用以下语句,临时取消 SET IDENTITY_IN ...

  6. 使用C#导出MSSQL表数据Insert语句,支持所有MSSQL列属性

    在正文开始之前,我们先看一下MSSQL的两张系统表sys.objects . syscolumnsMSDN中 sys.objects表的定义:在数据库中创建的每个用户定义的架构作用域内的对象在该表中均 ...

  7. CSS3：不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  8. easyui datagrid 表格组件列属性formatter和styler使用方法

    明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构 ...

  9. TextBox 绑定到DataTable某一列属性上

    将TextBox绑定到DataTable某一列属性上 DataTable dt = GetDataTable() textBox1.DataBindings.Add("Text", ...

随机推荐

  1. VBNET 文件信息和目录管理（判断，创建，删除，移动，复制）

    1.判断文件/目录是否存在 Try ' 先判断文件是否存在. If Not File.Exists(TextBox4.Text) Then File.CreateText(TextBox4.Text) ...

  2. MyBatis 安装和配置

    在这里我们使用 MyBatis 开发一个简单的 Java 项目(默认你已安装JDK和MySQL及会使用Maven的基本操作),可以与上一篇通过底层操作数据进行比较 1.新建表 students,插入数 ...

  3. 使用idea关联mysql时报错Server returns invalid timezone. Go to 'Advanced' tab and set 'serverTimezon'

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/liuqiker/article/detai ...

  4. python_操作MySQL 初解 之__<类方法调用并 增-删-改-查>

    文件一: 调用(sqls文件) # 导入模块 import pymysql from sqls import * # 创建类 class KaoShi(object): # 初始化 def __ini ...

  5. chrome 浏览器安装 postman

    chrome 浏览器安装 postman(插件下载见文章末尾) 1.安装方法 将下载的crx插件拖拽到chrome浏览器即可安装成功. 2.特殊情况 问题: chrome73版本后拖拽安装chrome ...

  6. Django 使用request获取浏览器发送的参数(Django编程-5)

    1.url:需要正则去匹配 url(r'^index/(num)/$',view.index) 匹配到的参数会自动传入对应的视图函数 也可以给匹配到的参数起名字?P url(r'^index/(?P& ...

  7. Django 数据库模块 单独使用

    pip install django pip install psycopg2 pip install mysqlclient Entity.py from django.db import mode ...

  8. MobileNet系列

    最近一段时间,重新研读了谷歌的mobilenet系列,对该系列有新的认识. 1.MobileNet V1 这篇论文是谷歌在2017年提出了,专注于移动端或者嵌入式设备中的轻量级CNN网络.该论文最大的 ...

  9. 记一次启动Tomcat 控制台以及log4j 乱码问题

    Tomcat启动乱码 问题描述:当你发现你的Tomcat启动时乱码了,而你只是换了个Tomcat版本而已. 在找到真正的问题之前,我在网上百度了N多的资料,都试过了,但是都不行.1.修改了 windo ...

  10. tensorflow 源码编译tensorflow 1.1.0到 tensorflow 2.0，ver:1.1.0rc1、1.4.0rc1、1.14.0-rc1、2.0.0b1

    目录 tensorflow-build table 更多详细过程信息及下载: tensorflow-build tensorflow 源码编译,提升硬件加速,支持cpu加速指令,suport SSE4 ...