<!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>

代码

css笔记 - column分栏的更多相关文章

  1. 纯CSS实现侧边栏/分栏高度自动相等

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=694 一.为何要分栏高 ...

  2. css3属性：column分栏

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

  3. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  4. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

  5. CSS3 column 分栏

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

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

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

  7. CSS3-column分栏

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

  8. CSS 分栏结构

    CSS 固定左侧导航栏 left----左侧菜单 cont -- 实际内容 right  ---右侧附加内容   两栏布局---左侧高度为内容撑开的高度     方法一:[坏处是需要 float]   ...

  9. css3分栏

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

随机推荐

  1. JS中的if语句内如何加or使多个条件通过

    if(a==1&&b==2){ //do something }//条件是a等于1  并且  b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...

  2. python预习day1

    计算机基础 cpu 大脑 内存 临时记忆 硬盘 永久记忆 输入设备 眼睛 耳朵 输出设备 嘴巴 操作系统 控制计算机硬件工作流程的 应用程序 安装在操作系统之上的软件 python简介 python是 ...

  3. 【夯实基础】- Java中的fail-fast机制

    转载自:Java中的fail-fast机制 遍历删除List中的元素有很多种方法,当运用不当的时候就会产生问题.下面主要看看以下几种遍历删除List中元素的形式: 1.通过普通的for删除删除符合条件 ...

  4. csdn 分享私藏的18个黑科技网站，想找什么软件就找什么软件！！！

    https://blog.csdn.net/sinat_33921105/article/details/103307419 1.NO.1–胡萝卜周 http://www.carrotchou.blo ...

  5. unity 实现技能释放

    要实现技能释放其实很简单,说白了就是在指定的位置Instantiate一个对应的例子特效.我走的弯路主要在寻找这个指定位置上. 对于指向性技能就不多说了,因为是有确切目标的(当然首先判断下技能能不能对 ...

  6. Java里面获取当前服务器(linux环境)的IP地址--与请求者的真实IP

    package com.wfd360.Util; import javax.servlet.http.HttpServletRequest; import java.net.Inet4Address; ...

  7. idea上maven打包

    首先要实现maven打包,pom需要引入依赖 pom.xml <project> <dependencies> …… </dependencies> <bui ...

  8. ETL讲解

    ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...

  9. 查看kafka版本

    kafka没有提供version命令,不确定是否有方便的方法,但你可以进入kafka/libs文件夹. 或: find / -name \*kafka_\* | head -1 | grep -o ' ...

  10. Unicode字符集的由来

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...