多列布局 css3 column属性
<!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属性的更多相关文章
- CSS3 column属性
css3 column属性的应用 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta c ...
- 多列布局(column)
容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...
- 从零开始学 Web 之 CSS3(七)多列布局,伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS多列布局(栅格布局)
一.多列布局 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 代码如下(具体的解释也在代码中)浏览器支持表格中的数字表示支持该方法的第一个浏览器的版本号. 紧跟在数字后面的 -webk ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们 ...
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- css3 多列布局记
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
随机推荐
- 请求php返回json生成自定义对象
php代码 public function convert_array(){ $arr = array( '0'=>array('name'=>'zc','height'=>173) ...
- 【转】MYSQL入门学习之九:索引的简单操作
转载地址:http://www.2cto.com/database/201212/176772.html 一.创建索引 www.2cto.com MYSQL常用的索引类型主要有以 ...
- [团队项目] Scrum 项目 2.0 产品BACKLOG
Scrum 项目 2.0 阅读教材第8章,8.1~8.3节 P157~168,了解获取用户需求的办法,每个组可以选择一二加以应用. 8.4节P168-171 查阅NABCDA模型的具体说明. 2.SC ...
- c#对话框
OpenFileDialog open = new OpenFileDialog();//创建对话框 open.InitialDirectory = @"C:\Documents and S ...
- 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 ...
- 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 ...
- jQuery常用技巧-使用的总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- IOS时间戳
什么是时间戳? 时间戳(timestamp),通常是一个字符序列,唯一地标识某一刻的时间.数字时间戳技术是数字签名技术一种变种的应用. 思考:简单来讲就是根据文件hash加密后生成的摘要和时间生成的时 ...
- FileInputstream的available()方法
摘自:http://greemranqq.iteye.com/blog/2051487
- 获取或者设置时,无后缀和A后缀和W后缀的区别
SetWindowTextW表示设置的字符串是WCHAR (双字节字符 )SetWindowTextA表示设置的字符串是CHAR (单字节字符 )SetWindowText表示设置的字符串是自动匹配当 ...