<!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. 使用 Filter 完成一个简单的权限模型

    ****对访问进行权限控制: 有权限则可以访问, 否则提示: 没有对应的权限, 请 返回其访问者的权限可以在manager那进行设置:

  2. Wireless Network

    Wireless Network Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 19626 Accepted: 8234 De ...

  3. 验证码识别--type2

    验证码识别--type2 终于来到了彩色图像,一定有一些特点 这里的干扰项是色彩不是很鲜艳的.灰色的线条,还有单独的干扰点,根据这些特性进行去除 直接ostu的话,有的效果好,有的效果不好   本来是 ...

  4. Linux多线程同步机制

    http://blog.163.com/he_junwei/blog/static/19793764620141711130253/ http://blog.csdn.net/h_armony/art ...

  5. UVa 213，World Finals 1991，信息解码

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. ceil floor函数

    > a=6.4> b=math.ceil(a)> print(b)7> c=math.floor(a)> print(c)6 ceil向上取整 floor向下取整

  7. CentOS 安装Redis

    redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value类型相对更多,包括strin ...

  8. zookeeper系列之二—zookeeper历史

    Zookeeper是什么? Zookeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby的一个开源版本.它是为分布式应用提供一致性服务的软件,提供的功能包括:配置服 ...

  9. nltk安装及wordnet使用详解

    环境:python2.7.10 首先安装pip 在https://pip.pypa.io/en/stable/installing/ 下载get-pip.py 然后执行 python get-pip. ...

  10. msm8916 lcd 相关调试点指导

    主要代码:LINUX\android\kernel\arch\arm\boot\dts\qcom\dsi-panel-trust-hx8379c-fwvga-video.dtsiLINUX\andro ...