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. 四大网络VGGNet

    一.特点 1.对AlexNet改进,在第一个卷积层用了更小的卷积核和stride 2.多尺度训练(训练和测试时,采用整张图的不同尺度) 由此,VGG结构简单,提取特征能力强,应用场景广泛 由单尺度测试 ...

  2. HttpClient SSL connection could not be established error

    系统从.net framework 升级到dotnet core2.1 原先工作正常的httpclient,会报SSL connection could not be established erro ...

  3. Hi,this is May.

    “山有木兮木有枝 心悦君兮君不知” 当一个现在的人正在思念过去的人,世间的一切也都会变成过去的样子. 声色的娱乐,本来就如闪电的光.击石的火.男女欢合不过埋香葬玉.赋别鹤离鸾之曲,臂膀一曲一伸的工夫罢 ...

  4. Codeforces Global Round 6[A,B,C]

    题意:给一个字符串,对它重新排列使得它是60的倍数. 模拟一下,需要能整除60  字符串中需要 能整除2 3 10,所以需要字符串各位数之和能整除3 并且有 一个偶数和一个0  或者两个0也行[没考虑 ...

  5. leetcode解题报告（26）：Add Binary

    描述 Given two binary strings, return their sum (also a binary string). For example, a = "11" ...

  6. Sublime Text 3 C++ 配置

    Sublime Text 3 C++ 配置 先将MinGW\bin添加至环境变量中,然后打开Sublime Text,菜单Tools->Build System->New Build Sy ...

  7. Luogu5591 小猪佩奇学数学 【单位根反演】

    题目链接:洛谷 \[ Ans=\frac{1}{k}(\sum_{i=0}^n\binom{n}{i}p^ii-\sum_{i=0}^n\binom{n}{i}p^i(i \ \mathrm{mod} ...

  8. 《挑战30天C++入门极限》c++中指针学习的两个绝好例子

        c/c++中指针学习的两个绝好例子 对于众多人提出的c/c++中指针难学的问题做个总结: 指针学习不好关键是概念不清造成的,说的简单点就是书没有认真看,指针的学习犹如人在学习饶口令不多看多学多 ...

  9. Java 多线程之生产者消费者（多个生成者多个消费者）synchronized 和lock多线程通讯和同步实现

    public class ProducterConsumerSample { public static void main(String[] args) { Resourse res = new R ...

  10. spring boot 之注册

    注册数据库 使用spring boot 之登录笔记  的数据库 在server 层 User create(String username, String password, String email ...