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. django 第四天模板渲染

    今日内容 一.模板渲染 语法 {{ 变量 }} {% 逻辑 %} 1.变量 取列表中的第几个元素,用索引 <p>{{ namelist.2 }}</p> 取字典中的第几个元素用 ...

  2. php获取本地化时间戳函数

    在实际的工作中我们还需要经常用到指定某个时间生成. 例如:需要找到昨天到今天此时此刻的注册用户. 那么我们需要做两件事情: 1.得到当前的时间unix时间戳.用time()函数就可以直接搞定大理石平台 ...

  3. Docker+GitLab+Jenkins+kubernetes实现DevOps 持续化集成和持续化部署概念图

    Docker+GitLab+Jenkins+kubernetes实现DevOps 持续化集成和持续化部署概念图 转载自:原创 IT综合 作者:百联达 时间:2017-05-09 15:48:08 41 ...

  4. asp.net+ tinymce粘贴word

    公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...

  5. Redis企业实战的几个坑

    一.前言 小伙伴们对Redis应该不陌生,Redis是系统必备的分布式缓存中间件,主要用来解决高并发下分担DB资源的负载,从而提升系统吞吐量. Redis支持多种数据类型,String(字符串).li ...

  6. eclipse快捷键及设置【转】

    1.Eclipse设置新建菜单初始项 windows-->Perspective-->Customize Perspective--> 2.Eclipse快捷键 1. ctrl+sh ...

  7. html转图片/html2canvas的使用/星座测试/类似于损友圈的活动

    https://try.fishqc.com/Activity/constellation ---成品 电脑上录的gif 有借鉴的链接,很多,下面这个还不错~先别看,尊重下我先~~~~ https:/ ...

  8. mysql5.6源码部署

    一.准备环境 环境:centos-7.3 一台软件版本:mysql-5.6.39 1.安装依赖yum -y install autoconf libaio bison ncurses-devel 2. ...

  9. 【Vue.js游戏机实战】- Vue.js实现老虎-机抽奖总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现老虎-机抽奖 实现思路: Vue component实现老虎-机组件,可以嵌套到任意要使用的 ...

  10. ubuntu之路——day10.1 ML的整体策略——正交化

    orthogonalization 正交化的概念就是指,将你可以调整的参数设置在不同的正交的维度上,调整其中一个参数,不会或几乎不会影响其他维度上的参数变化,这样在机器学习项目中,可以让你更容易更快速 ...