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. Mac 下Wireshark 找不到网卡

    终端上面,执行如下命令: sudo chgrp admin /dev/bpf* sudo chmod g+rw /dev/bpf*

  2. 83: 模拟赛 树形dp

    $des$ $sol$ 维护每个点的子树中的信息以及非子树的信息 $code$ #include <bits/stdc++.h> using namespace std; #define ...

  3. 贪心算法训练(九)——Best Cow Line(字典序最小问题)

    原题链接:Best Cow Line 1. 问题描述 2. 输入 6 A C D B C B 3. 输出 ABCBCD 4.思路分析 不断地取原字符串 S 中开头和末尾比较小的字符串放到 T 的末尾 ...

  4. SVN优于CVS之处

    1.原子提交.一次提交不管是单个还是多个文件,都是作为一个整体提交的.在这当中发生的意外例如传输中断,不会引起数据库的不完整和数据损坏. 2.重命名.复制.删除文件等动作都保存在版本历史记录当中. 3 ...

  5. 「雅礼集训 2017 Day10」拍苍蝇

    传送门 Description 有一天,小 A 的母亲对他家里的卫生状况非常不满意,他的房间里有非常多的苍蝇.在母亲的威逼利诱下,小 A 拿起了苍蝇拍去消灭家里的苍蝇.然而,小 A 以前从来没有亲手消 ...

  6. LocalStorage 的 具体操作 与 设置有效期

    读取与存储 的使用方法 //存储 (名称 , 内容 , 有效期<小时> ) // 如果想要自己改变 有效期的单位 可以在 set 方法中 // 找到 这两个 setHours getHou ...

  7. 【知识点】同样是消息队列，Kafka凭什么速度那么快？

    同样是消息队列,Kafka凭什么速度那么快? 作者 | MrZhangxd Kafka的消息是保存或缓存在磁盘上的,一般认为在磁盘上读写数据是会降低性能的,因为寻址会比较消耗时间,但是实际上,Kafk ...

  8. shell脚本编程——生产实战案例

    生产实战案例     在日常的生产环境中,可能会遇到需要批量检查内网目前在线的主机IP地址有哪些,还可能需要检查这些在线的主机哪些端口是开放状态,因此依靠手工来检查是可以实现,但比较费时费力,所以需要 ...

  9. GO语言strconv包的使用

    Go语言中strconv包实现了基本数据类型和其字符串表示的相互转换. strconv包 strconv包实现了基本数据类型与其字符串表示的转换,官方文档中文版. string与int类型转换 Ato ...

  10. Docker|部署及简单使用

    环境:VMware + centos7 + docker17.05.0 一.安装docker 1.修改ifcfg-ens33 配置虚拟机的网络,保证可以正常联网 命令:vi /etc/sysconfi ...