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. obj-c在Xcode之外如何使用@import关键字

    在Xcode中@import可以很方便的代替#import的功能,具体区别和便利请自行google之. 这里简单介绍下在Xcode之外如何使用@import.直接以 @import Foundatio ...

  2. 解读Raft（三 安全性）

    前言 之前的两篇文章更多的是在描述Raft算法的正常流程,没有过多的去讨论异常场景. 而实际在分布式系统中,我们更多的都是在应对网络不可用.机器故障等异常场景,所以本篇来讨论一下Raft协议的安全性, ...

  3. Supervisor安装、配置、开启启动

    1.安装Python包管理工具(easy_install) wget --no-check-certificate https://bootstrap.pypa.io/ez_setup.py -O - ...

  4. getContext在谷歌浏览器中，使用时要先加载canvas对象，否则会提示'getContext is null'

    <body> <canvas id=" style="border:1px solid #c3c3c3;"> Your browser does ...

  5. objc/runtime.h 查看私有api

    objc/runtime.h 相关 Objecitve-C的重要特性是Runtime(运行时),在Interacting with the Runtime(交互运行)中,运行时函数部分,苹果给出了/u ...

  6. Error filterStart的问题

    今天出现这个问题 严重: Error filterStart org.apache.catalina.core.StandardContext start 严重: Context startup fa ...

  7. miniUI中弹出框问题

    ---恢复内容开始--- 设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"& ...

  8. MySQL/MariaDB的锁

    本文目录: 1.MariaDB/MySQL事务提交的方式 2.MariaDB/MySQL中的锁简介 2.1 不同存储引擎支持的锁级别 2.2 锁类型 2.3 锁兼容性 3.MyISAM的表级锁(loc ...

  9. jquery.js

    /*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license //@ sourceMappingUR ...

  10. Effective Java 第三版——39. 注解优于命名模式

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...