<!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. 【转】在Eclipse中配置tomcat

    转载地址: http://kin111.blog.51cto.com/738881/163096 为了在Eclipse中进行struts2的测试,才发现自己机器上的Eclipse没有集成Tomcat, ...

  2. app framework map及ajax方法

    $(function () { $.ajax({ url: 'Ashx/GetProductList.ashx', contentType: "JSON", success: fu ...

  3. 链接注入（便于跨站请求伪造）（AppScan扫描结果）

    最近工作要求解决下web的项目的漏洞问题,扫描漏洞是用的AppScan工具,其中此篇文章是关于链接注入问题的.下面就把这块东西分享出来. 原创文章,转载请注明 -------------------- ...

  4. Boring count(字符串处理)

    Boring count Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  5. Android图形系统之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback之间的联系

    1.Surface Surface extends Objectimplements Parcelable java.lang.Object    ↳ android.view.Surface Cla ...

  6. C#中的异步和同步

    同步 同步(英语:Synchronization [ˌsɪŋkrənaɪ'zeɪʃn]),指对在一个系统中所发生的事件(event)之间进行协调,在时间上出现一致性与统一化的现象.说白了就是多个任务一 ...

  7. PHP 之 FastCGI 与 mod_php 详解

    背景 PHP最常用的方式是以模块的方式(mod_php)运行在Apache中,也是Apache运行PHP的默认方式:但在Nginx中,Nginx又使用的是PHP-FPM,但是PHP-FPM到底是个什么 ...

  8. 如何从MySQL官方Yum仓库安装MySQL5.6

    (一),2013年10月,MySQL开发团队正式宣布支持Yum仓库,这就意味着我们现在可以从这个Yum库中获得最新和最优版的MySQL安装包.本文将在一台全新安装的CentOS6上安装MySQL5.6 ...

  9. crontab执行shell脚本

    */5 * * * * cd /data/**/ && ./*.sh * * * * * /bin/sh /home/*.sh

  10. C# 多线程之一：信号量Semaphore

    通过使用一个计数器对共享资源进行访问控制,Semaphore构造器需要提供初始化的计数器(信号量)大小以及最大的计数器大小 访问共享资源时,程序首先申请一个向Semaphore申请一个许可证,Sema ...