<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column分栏</title>
<style>
div{
width: auto;
margin-bottom:30px;
padding: 10px;
outline: 2px solid #ff04bb;
}
div.count {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
/*指定栏目数量为3栏，则会根据元素的宽度变化来液态分布三栏的宽度。——还是响应式的奥*/
}
div.width{
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
/*每一栏的宽度都是150px.根据总宽度液态分配栏目之间的距离*/
}
div.gap{
/*-webkit-column-count: 3;*/
/*-moz-column-count: 3;*/
/*column-count: 3;*/
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-gap:50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule: 4px solid #a3cfff;
-moz-column-rule: 4px solid #a3cfff;
column-rule: 4px solid #a3cfff;
}
div.columns{
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
</style>
</head>
<body>
<h1>column-count:只指定栏目数量进行液态分栏，自动分布栏目宽度和栏距</h1>
<div class="count">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。
</div>
<hr/>
<h1>column-width:只指定每一栏的栏目宽度，根据元素宽度来液态进行分栏，决定分出栏目的数量和栏距。以达到每一栏的均衡相等。</h1>
<div class="width">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。
</div>
<hr/>
<h1>column-gap:指定栏目间的距离是多少，必须配合column-count或column-width其中一个；同样液态分配栏目数量或栏目宽度。看你配合使用的是谁了。</h1>
<div class="gap">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。
</div>
<hr/>
<h1>column-rule指定栏距间的分割线，用法同border，需要指定：1px solid #颜色；</h1>
<div>-webkit-column-rule: 4px solid #a3cfff;
-moz-column-rule: 4px solid #a3cfff;
column-rule: 4px solid #a3cfff;</div>
<hr/>
<h1>column-fill:指定或检索各列是否高度统一</h1>
<div>-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance（所有列的高度以其中最高的一列统一）;
auto:表示列高度自适应内容
</div>
<hr/>
<h1>columns:简写模式： column-width | column-count </h1>
<div>-webkit-columns: width count;
-moz-columns:-;
columns:-；
</div>
<div class="columns">
每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。每一个下拉菜单，都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少，那么最好不用下拉菜单，直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方（比如日期、省份等），偶尔还能用在一些需要反复操作的地方（比如操作菜单）。总之，谨慎使用下拉菜单，重要选择最好不要使用下拉菜单。
</div>
<hr/>
</body>
</html>

CSS3-column分栏的更多相关文章

  1. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  2. css笔记 - column分栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css3属性：column分栏

    css3选择器中提出了分栏的属性,其浏览器支持情况为:Internet Explorer 10 和 Opera 支持 column 属性,Firefox 支持替代的 -moz-column 属性,Sa ...

  4. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  6. css3分栏

    <!DOCTYPE HTML> <meta charset="UTF-8"> <title>分栏</title> <style ...

  7. css3 -&gt; 多栏布局

    在进行多栏布局时.使用bootstrap的栅格系统能够非常轻松的实现效果,事实上css3本身也提供了多兰布局的功能. 比方,我们在一个section标签内填充了非常多内容.同一时候希望内容可以显示成三 ...

  8. columns分栏与flex弹性盒模型

    columns  分栏 值:column-width:设置每列的宽度        column-count:设置列数   例:columns{200px 3}   列数和宽度固定        co ...

  9. ActiveReports 报表应用教程 (4)---分栏报表

    在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...

随机推荐

  1. WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

    方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details ...

  2. 关于最近折腾的ubuntu12.10

    win7旗舰正版up1 UltraISO + ubuntu-12.10-desktop-i386.iso + 4GKingston = 启动U盘 USB HDD 启动 进入ubuntu桌面,安装,磁盘 ...

  3. 【jQuery EasyUI系列】使用属性介绍

    1.ValidateBox The validatebox is designed to validate the form input fields.If users enter invalid v ...

  4. 1118ALTER TABLE tabname DISCARD TABLESPACE快速导入数据利用表空间

    -- 快速导入数据如果你有.ibd文件的一个干净的备份,你可以按如下操作从被起源的地方恢复它到MySQL安装中:相当快速 1. 发出这个ALTER TABLE语句: 2. ALTER TABLE tb ...

  5. Chrome 自动填充的表单是淡黄色的背景

    Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; - ...

  6. asp.net mvc输出自定义404等错误页面，非302跳转。

    朋友问到一个问题,如何输出自定义错误页面,不使用302跳转.当前页面地址不能改变. 还要执行一些代码等,生成一些错误信息,方便用户提交反馈. 500错误,mvc框架已经有现成解决方法: filters ...

  7. Spring + Spring MVC+Hibernate框架整合详细配置

    来源于:http://www.jianshu.com/p/8e2f92d0838c 具体配置参数: Spring: spring-framework-4.2.2Hibernate: hibernate ...

  8. linux安装软件的学习

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  9. 开发错误记录11：git报错 fatal:open /dev/null or dup failed: No such file or directory

    今天在自己的的电脑上装了git,没成想运行报错: 重装了几次git ,都不行,电脑上没有装github桌面版; 后来在网上查到了方法,反映这是系统的问题: null是比较特殊的系统文件,它实际上是为操 ...

  10. [转]oracle数据类型和对应的java类型

    地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...