CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]
设置或检索对象的列数和每列的宽度
其中:[ column-width ]:设置或检索对象每列的宽度;[ column-count ]:设置或检索对象的列数。
css代码:
body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}
html代码:
<h1>列数及列宽固定:</h1>
<div class="test">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列宽固定,根据容器宽度液态分布列数:</h1>
<div class="test2">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
结果如图所示:
以下列出column运用的相关属性
1.column-width:<length> | auto
设置或检索对象每列的宽度
如:-moz-column-width:200px;
2.column-count:<integer> | auto
设置或检索对象的列数
如:-webkit-column-count:3;
3.column-gap:<length> | normal
设置或检索对象的列与列之间的间隙
如:column-gap:normal;column-gap:40px;
4.column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]
设置或检索对象的列与列之间的边框。复合属性。相当于border属性
如:column-rule:10px solid #090;
5.column-span:none | all
设置或检索对象元素是否横跨所有列。
如:column-span:all;
6.column-fill:auto | balance
设置或检索对象所有列的高度是否统一。
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一
如:column-fill:balance;
7.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之前是否断行。
auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列
8.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column
设置或检索对象之后是否断行。
auto:既不强迫也不禁止在元素之后断行并产生新列
always:总是在元素之后断行并产生新列
avoid:避免在元素之后断行并产生新列
9.column-break-inside:auto | avoid | avoid-page | avoid-column
设置或检索对象内部是否断行。
auto:既不强迫也不禁止在元素内部断行并产生新列
avoid:避免在元素内部断行并产生新列
其实常用的也就前面5条。
CSS3布局之多列布局columns详解的更多相关文章
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- css常见的各种布局下----三列布局
css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css布局之两列布局
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- ExtJS布局方式(layout)图文详解
Auto默认布局 不给下级组件指定大小和位置 Absolute绝对布局 可使用坐标(x.y)进行布局 Accordion手风琴布局 实现Accordion效果的布局,也可叫可折叠布局.也就是说使用该布 ...
- jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
- 慕课笔记利用css进行布局【三列布局】
三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...
随机推荐
- 【array】数组复习
一.定义 数组:一组相关变量的集合. 二.初始化 三种方法初始化: int [] intArray = new int[4]; //必须表明容量才表示已经初始化,不带的话会报错未初始化 String ...
- Python编程Day6——元组类型、字典类型、集合
一.元组类型(tuple) 1.用途:记录多个值,当多个值没有改变的需求此时元组更为合适 2.定义:在()内用逗号分隔开多个任意类型的值(参数为for可以循环的对象) 3.常用操作: 索引(正取向+反 ...
- 如何批量添加图片到ppt的方法
如何批量添加图片到ppt 许多时候会做一些幻灯片,需要大量的图片,但是往往一张以张的加图片,会很浪费时间,如何快速添加图片,一次解决呢? 步骤:插入-相册-点击相册 点击文件,批量选择你要插入的图片, ...
- NLog 自定义Target
http://nlog-project.org/2015/06/30/extending-nlog-is-easy.html 新建一个类库,命名规则为NLog.*.dll 定义一个类输出日志到Rabb ...
- 模板发送java邮件
Creating email content using a templating library The code in the previous examples explicitly creat ...
- CentOS7 配置FTP服务器
1.安装vsftpd yum -y install vsftpd 2.在firewalld中添加规则 为确保成功 先启动firewalld服务 systemctl enable firewalld s ...
- 从Java小白到收获BAT等offer,分享我这两年的经验和感悟
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- Tomcat8源码笔记(八)明白Tomcat怎么部署webapps下项目
以前没想过这么个问题:Tomcat怎么处理webapps下项目,并且我访问浏览器ip: port/项目名/请求路径,以SSM为例,Tomcat怎么就能将请求找到项目呢,项目还是个文件夹类型的? Tom ...
- MySQL中间件之ProxySQL(6):管理后端节点
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.配置后端节点前的说明 为了让ProxySQL能够找到后端的MySQ ...
- 分布式系统监视zabbix讲解一之zabbix安装--技术流ken
zabbix概述 Zabbix是什么 Zabbix 是由Alexei Vladishev创建,目前由Zabbix SIA在持续开发和支持. Zabbix 是一个企业级的分布式开源监控方案. Zabbi ...