<!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. linux 安装Python3.6

    1.安装依赖 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel ...

  2. 07、MySQL—时间日期类型

    时间日期类型 1.Date 日期类型:系统使用三个字节来存储数据,对应的格式为:YYYY-mm-dd,能表示的范围是从1000-01-01 到9999-12-12,初始值为0000-00-00 2.T ...

  3. 【转载】C#中List集合使用GetRange方法获取指定索引范围内的所有值

    在C#的List集合中有时候需要获取指定索引位置范围的元素对象来组成一个新的List集合,此时就可使用到List集合的扩展方法GetRange方法,GetRange方法专门用于获取List集合指定范围 ...

  4. 归并排序python实现源码

    将开发过程经常用到的一些代码片段收藏起来,下面的资料是关于归并排序python实现的代码,应该能对码农们有一些用. def mergesort(arr): if len(arr) == 1: retu ...

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

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

  6. 构建nodejs环境

    总想留下点东西,不负年华! 00.download releasehttps://nodejs.org/dist/      //all release example https://nodejs. ...

  7. Nginx基于域名的虚拟主机

    一.基于域名的虚拟主机 修改配置文件/usr/local/nginx/conf/nginx.conf 创建新的虚拟主机的根目录和默认网页index.html 重新加载nginx的配置文件 查看两个虚拟 ...

  8. 查看Linux 系统的配置，内核版本和增减用户/增减组/增减权限

    今天购买了一款腾讯云服务器,一年120RMB 配置也很一般 1核的CPU 2GB内存 1Mbps 带宽 普通云硬盘  50G 操作系统: CentOS 7.2.64 现在来验收一下 17 2019-0 ...

  9. django考点答案

    1 列举Http请求中常见的请求方式 2 谈谈你对HTTP协议的认识.1.1 长连接3 简述MVC模式和MVT模式4 简述Django请求生命周期5 简述什么是FBV和CBV6 谈一谈你对ORM的理解 ...

  10. CefSharp 与 js 相互调用及注意事项

    CefSharp 与 js 相互调用 一. CefSharp调用 js CefSharp.WinForms.ChromiumWebBrowser wb; ... 方式1. ExecuteScriptA ...