column

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局。让我们瞧瞧：

.three-column {

  padding: 1em;

  -moz-column-count: 3;

  -moz-column-gap: 1em;

  -webkit-column-count: 3;

  -webkit-column-gap: 1em;

  column-count: 3;

  column-gap: 1em;

}
<div class="three-column">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</div>

CSS columns是很新的标准，所以你需要使用前缀，并且它不被IE9及以下和Opera Mini支持。还有许多和 column 相关的属性，点击这里了解更多。否则让我们讨论下一个主题。

文字分列 CSS属性的更多相关文章

  1. 使用css属性line-height实现文字垂直居中的问题

    使用css属性line-height实现文字垂直居中的问题 1.使用css属性line-height实现文字垂直居中 方法比较简单,但是只能实现单行文字的垂直居中. 单行垂直居中效果如下:   要是p ...

  2. css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

    1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...

  3. 通过设置CSS属性让DIV水平居中

    通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...

  4. css学习（2）-- 常见的CSS属性和值

    1.CSS中修饰字体的属性 属    性 描    述 属  性  值 font-family 字体族科 任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...

  5. HTML编码规则、CSS属性声明顺序--简介

    From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...

  6. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  7. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  8. 第六篇、CSS属性

    <!--1.可继承性 visible(可见的):hidden --掩藏,但是结构还保存 cursor(光标样式):pointer(手指)crosshair(十字架) 一般是文字控制属性 内联标签 ...

  9. CSS属性总结——思路很清晰

    CSS 属性总结 CSS的属性是用来改变文档元素的状态的,其中主要改变两方面的东西,即位置.样式,现在我们就将CSS的属性分为定位和样式两方面来总结,知识结构图如下:     用来定位的属性: 在同一 ...

随机推荐

  1. CF959F

    题目大意:给定n个数,有Q次询问,每次询问由两个数l,x组成,表示前缀[1,l]构成的子序列有多少异或起来为x,个数%1e9+7 做法:考虑一个由x个数构成的线性基,如果这个线性基由Y个数构成,可以通 ...

  2. Python可视化TVTK库初使用

    本周学习了初步的TVTK库的安装及使用方法,第一次通过tvtk.CubeSource方法建立了一个长方体对象.对TVTK的接触有了新的体会. 首先,在网上下载了以下五个库并按顺序通过pip指令在cmd ...

  3. TCP / IP，HTTP

    大学学习网络基础的时候老师讲过,网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层.通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用 ...

  4. jbpm 工作流（二）

    1           概述 本文主要介绍如何将JBPM+Struts+Spring+Hibernate整合在一块.并通过一个简单实例来说明.此实例为一个申请审批的简单流程,并将申请人和审批人记录到数 ...

  5. 并发编程（五）：CAS

    在atomic包中,大多数类都是借助unsafe类来实现的,如以下代码 public static AtomicInteger count = new AtomicInteger(0); privat ...

  6. JavaScript对象添加、删除、修改对象的属性

    https://www.cnblogs.com/goweb/p/5357640.html 利用动态特性 function Person(){}; var person = new Person(); ...

  7. WSL与Windows交互实践

    1. WSL是什么 2. WSL新特性 3. WSL管理配置 4. WSL交互 5. 解决方案  * 5.1 使用别名  * 5.2 多复制一份  * 5.3 重定向  * 5.4 symlink 6 ...

  8. 一个简单的小小记账本程序(java)

    感觉基础知识学了不少,但是一直搞不清一个项目的实际开发流程,所以就借着这个小记账本的程序梳理一下.因为楼主也是出于学习阶段的菜鸟,所以程序可能会有各种玄学的bug,希望一起提升吧. 跟着站长学到了很多 ...

  9. java深入浅出之数据结构

    1.整形数据 byte.short.int.long,分别是1248个字节的存储量,取值范围也是依次增大的,其中int是正负21亿多: long a = 1111222233334444L:记住后面要 ...

  10. 学习CountDownLatch

    对比 使用CyclicBarrier 上次用Barrier方式实现了线程等待一组完成,这次用CountDownLatch来实现 我的理解CountDownLatch 采用的方式是计数器方式,每执行完一 ...