<!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. Android App 开发常用的xUtils框架

      最近搜了一些框架供初学者学习,比较了一下XUtils是目前git上比较活跃 功能比较完善的一个框架,是基于afinal开发的,比afinal稳定性提高了不少,下面是介绍: 鉴于大家的热情,我又写了 ...

  2. Unity Adam特性整理

    1.Wind 小工具,一个绘制箭头Gizmos的脚本 2.TubeLight柱形光照 蛮NB的技术,实现动态柱状光照,但相机必须挂上PostProcessing 默认场景拖出来之后是这样的,然后给相机 ...

  3. Linux下c++中的atoi、atol、atoll、atof函数调用实例

    本文中调用的四个函数如下: atoi函数:将字符串转化为int类型变量 atol函数:将字符串转化为long类型变量 atoll函数:将字符串转化为long long类型变量 atof函数:将字符串转 ...

  4. HDU 4810 Wall Painting

    Wall Painting Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. 2015 AlBaath Collegiate Programming Contest B

    Description Yaaaay, Haven't you heard the news? Bakaloria results are out! And Reem had very good gr ...

  6. Android各种获取Context方法

    首先讲一讲这四个函数的区别,后面还有我对context的一些理解区别如下所示: 原文链接http://stackoverflow.com/questions/6854265/getapplicatio ...

  7. Spark系列之二——一个高效的分布式计算系统

    1.什么是Spark? Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行计算框架,Spark基于map reduce算法实现的分布式计算,拥有H ...

  8. CodeForces 483B Friends and Presents

     Friends and Presents Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  9. webAPI获得链接客户端IP地址

    public static class HttpRequestMessageExtensions { private const string HttpContext = "MS_HttpC ...

  10. 教你如何使用php session

    原文网址:http://www.jb51.net/article/42500.htm   学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实 ...