<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
div{ -moz- Firefox的前缀
-webkit- Chrome和safari
-ms- IE
-o- opera

/*-moz-column-width:150px;自动设置列数
-moz-column-count:3;设置列数，auto为1列
-moz-columns:auto 3;宽自动，列数：3*/
-moz-columns:200px 3; /*每列的最小宽度为200px，当缩小到200px以内时，列数就自动。*/
-moz-column-gap:20px; /*列与列之间的距离*/
-moz-column-rule:2px dashed #ccc;/*列与列之间的分割线，这个分割线不会破坏布局*/
-moz-column-span:all; /*设置跨列大标题，none则不跨列；*/

-webkit-columns:200px 3;
-webkit-column-gap:20px;
-webkit-column-rule:2px dashed #ccc;

columns:200px 3;
column-gap:20px;
column-rule:2px dashed #ccc;

}
h1{ （跨列大标题）
-moz-column-span:all;(火狐暂时不支持)
-webkit-column-span:all;
column-span:all;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>我是大标题</h1>
<h3>我是第一段内容</h3>
<p>“本”在哪里？徐洪才认为，“本”就是城乡一体化、新兴城镇化过程中一些机制、体制的创新，比如户籍制度、社会保障体制改革、土地制度改革。</p>
<h3>我是第二段内容</h3>
<p>四线城市的土地是充足的，但人口流入少，需求没那么旺盛，所以房地产就有库存问题，而以下城市需求很旺盛，但土地供应不足，供求矛盾很突出。一线城市集中了教育、医疗等资源，还有就业机会。所以人口蜂拥而至。</p>
<h3>我是第三段内容</h3>
<p>徐洪才指出，从农村到三、四线城市到二线城市再到大城市，形成一个梯形发展的格局。将来还会形成大量人口向一线城市涌进，大城市的矛盾会越来越尖锐，大城市病会越来越突出。</p>
<h3>我是第四段内容</h3>
<p>“这些制度建立好了，大家就没必要往大城市跑了。中国一线城市高房价的病根就在这儿。但这个改革是一个漫长的过程。”徐洪才坦言。</p>
</div>
</body>
</html>

多列布局 css3 column属性的更多相关文章

  1. CSS3 column属性

    css3 column属性的应用 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta c ...

  2. 多列布局（column）

    容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...

  3. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. CSS多列布局（栅格布局）

    一.多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webk ...

  5. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...

  6. CSS3之多列布局columns详解

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

  7. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  8. css3 多列布局记

    css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...

  9. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

随机推荐

  1. 请求php返回json生成自定义对象

    php代码 public function convert_array(){ $arr = array( '0'=>array('name'=>'zc','height'=>173) ...

  2. 【转】MYSQL入门学习之九：索引的简单操作

    转载地址:http://www.2cto.com/database/201212/176772.html 一.创建索引  www.2cto.com           MYSQL常用的索引类型主要有以 ...

  3. [团队项目] Scrum 项目 2.0 产品BACKLOG

    Scrum 项目 2.0 阅读教材第8章,8.1~8.3节 P157~168,了解获取用户需求的办法,每个组可以选择一二加以应用. 8.4节P168-171 查阅NABCDA模型的具体说明. 2.SC ...

  4. c#对话框

    OpenFileDialog open = new OpenFileDialog();//创建对话框 open.InitialDirectory = @"C:\Documents and S ...

  5. Power Strings 分类： POJ 串 2015-07-31 19:05 8人阅读 评论(0) 收藏

    Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Practice POJ ...

  6. AIM Tech Round 3 (Div. 2) A

    Description Kolya is going to make fresh orange juice. He has n oranges of sizes a1, a2, ..., an. Ko ...

  7. jQuery常用技巧-使用的总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  8. IOS时间戳

    什么是时间戳? 时间戳(timestamp),通常是一个字符序列,唯一地标识某一刻的时间.数字时间戳技术是数字签名技术一种变种的应用. 思考:简单来讲就是根据文件hash加密后生成的摘要和时间生成的时 ...

  9. FileInputstream的available()方法

    摘自:http://greemranqq.iteye.com/blog/2051487

  10. 获取或者设置时，无后缀和A后缀和W后缀的区别

    SetWindowTextW表示设置的字符串是WCHAR (双字节字符 )SetWindowTextA表示设置的字符串是CHAR (单字节字符 )SetWindowText表示设置的字符串是自动匹配当 ...