column的布局形式还没有使用过，后续的bug和解决方案有待检验。

column

column-count：number； 设置内容分为多少栏显示

column-width：长度单位；设置每一栏的宽度而不设定元素的宽度

column-gap:长度单位;设置多栏之间的间隔距离

column-rule:宽度，颜色;在栏与栏之间增加一条间隔线。类似border.

column-span:all/none;设置是否跨栏显示

demo1 文章分栏

.txt{width:1000px;text-indent:2em;padding:0;margin:0; }

.txt2{-webkit-column-count:3; -webkit-column-gap:20px; -webkit-column-rule:2px dotted #ccc;}

　　

demo2 不再需要浮动布局

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS3 mask</title>

	<style>

	*{margin:0;padding: 0;overflow: hidden;}

	.box{width: 100px;height: 100px;background-color: red;display: block;}

	.txt{width:1000px;}

	.txt .box{margin:10px;}

	.txt2{-webkit-column-count:4;}

	.txt2 .box{margin:0;}

	</style>

</head>

<body>

 <h2>没有分栏</h2>

 <div class="txt">

  	<div class="box"></div>

	<div class="box"></div>

	<div class="box"></div>

	<div class="box"></div>

</div>

<h2>设置分栏后</h2>

 <div class="txt txt2">

  	<div class="box"></div>

	<div class="box"></div>

	<div class="box"></div>

	<div class="box"></div>

</div>

</body>

</html>

　　

CSS3 column 分栏的更多相关文章

  1. css笔记 - column分栏

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

  2. css3属性：column分栏

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

  3. CSS3-column分栏

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

  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. 洛谷 P1854 花店橱窗布置 题解

    Analysis 给定一个f*v的矩阵 要求从第一行走到第f行,每行取走一个数, 且该行所取的数必须必上一行所取的数的列数大 , 求所能取走的最大值 注意每一行所取走的数字的列数必须大于等该行的行号 ...

  2. man、whatis、apropos命令

    man命令类似于Linux的帮助文档. 1.man1提供给普通用户的可执行命令说明: 输入man 1 ls 后,结果如下: 结果分析: (1)NAME:命令的名称: (2)SYNOPSIS:参数的使用 ...

  3. 叉积_判断点与三角形的位置关系 P1355 神秘大三角

    题目描述 判断一个点与已知三角形的位置关系. 输入输出格式 输入格式: 前三行:每行一个坐标,表示该三角形的三个顶点 第四行:一个点的坐标,试判断该点与前三个点围成三角形的位置关系 (详见样例) 所有 ...

  4. 深入基础(四)Buffer,转码

    Buffer     前面提及到一些关于buffer类的问题,当时不是很明确 那么就次机会顺便深入探讨一下这个东西到底干嘛的出现在什么时候,如何使用.昨天跟朋友聊天他说我每一篇博文内容太长太长了 虽然 ...

  5. git添加公钥后报错sign_and_send_pubkey: signing failed: agent refused operation的解决办法

    在服务器添加完公钥后报错 sign_and_send_pubkey: signing failed: agent refused operation 这个时候我们只要执行下 eval "$( ...

  6. CSP-S2019 快乐爆0

    hhh 我爆0了 快乐 大家都比我强 hh 常规操作 本来就是个憨憨 回去复习文化课了 唉 干啥啥不行

  7. 2.json解析

    static String jsonStr = "{\"sites\":[{\"name\":\"gold\",\"ur ...

  8. SpringMVC的请求转发的三种方法

    SpringMVC请求转发的三种方法 首先明白请求转发是一次请求,地址栏不会发生变化,区别于重定向.springmvc环境自行配置. 以下举例中存在如下文件/WEB-INF/pages/success ...

  9. 从一个表中往另外一个表中插入数据用到的SQL

    insert into jdjc_zzjcxm (zj,jcxmmc) select sys_guid(),zbmc from JDJC_WHJXXMMC;

  10. 绕流振动UDF【转载】

    宏DEFINE_GRID_MOTION用来移动任意边界和流体区域内的网格节点.它提供了对节点和网格最大限度的操作,可以将刚体运动.变形和相对运动等结合起来.但是使用此UDF时,每一个时间步都必须执行. ...