<!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. 把项目通过maven生产源码包和文档包并发布到自己的私服上

    <!-- 把项目通过maven生产源码包和文档包并发布到自己的私服上 执行maven命令,mvn clean package,执行完成后 命令:mvn deploy 就可以发布到你自己的私服上了 ...

  2. Java自学-数组 复制数组

    Java 如何复制数组 数组的长度是不可变的,一旦分配好空间,是多长,就多长,不能增加也不能减少 步骤 1 : 复制数组 把一个数组的值,复制到另一个数组中 System.arraycopy(src, ...

  3. Sonatype安装

    https://www.cnblogs.com/wotoufahaiduo/p/11223834.html Sonatype Nexus Repository Manage admin ccf0cab ...

  4. localStorage的增删改查

    var _localStorage = window.localStorage; undefined /* 增 */ _localStorage.name = '张泰松' "张泰松" ...

  5. Java 参数个数可变的函数

    示例: package my_package; public class Test { public static void main(String[] args) { out("重庆师范大 ...

  6. 使用ABAP操作Excel的几种方法

    这篇文章本来不在我计划之内,因为最近一个朋友微信上问到我这个问题,但我平时在SAP研究院工作中从没遇到过需要用ABAP操作Excel的需求,因此也没有太多技术实现细节可以分享给大家,只能泛泛写一些. ...

  7. 复盘一篇讲sklearn库学习文章(上)

    认识 sklearn 官网地址: https://scikit-learn.gor/stable/ 从2007年发布以来, scikit-learn已成为重要的Python机器学习库, 简称sklea ...

  8. union的使用

    将多条select语句的结果,合并到一起,称为联合查询 使用union关键字 场景: 获取数据的条件,出现逻辑冲突,或者很难在一个逻辑内表示,就可以拆成多个逻辑,分别实现,最后将结果合并到一起 sel ...

  9. 异常详细信息: System.MissingMethodException: 无法创建抽象类。

    asp.net mvc 在使用post向后端传送json数据时报异常,在路由配置中添加如下即可 public static void RegisterRoutes(RouteCollection ro ...

  10. Java中的乐观锁

    1.前言 之前好几次看到有人在面经中提到了乐观锁与悲观锁,但是一本<Java Concurrency In Practice>快看完了都没有见到过这两种锁,今天终于在第15章发现了它们的踪 ...