column

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

  1. .three-column {
  2.   padding: 1em;
  3.   -moz-column-count: 3;
  4.   -moz-column-gap: 1em;
  5.   -webkit-column-count: 3;
  6.   -webkit-column-gap: 1em;
  7.   column-count: 3;
  8.   column-gap: 1em;
  9. }
<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. Leetcode_204_Count Primes

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/46366207 Description: Count the ...

  2. 在 Linux 下用 mkdir 命令来创建目录和子目录

    mkdir 是什么呢 Mkdir 是一个用来在 Linux 系统下创建目录的命令.此命令属于内建命令. 运行 mkdir 命令 你可以在你的控制台直接键入 mkdir 来使用它. $ mkdir 默认 ...

  3. android的服务分类-andrioid学习之旅（94）

    摘自韩国棒子的书,android框架摘要 android服务类型分类,如下图: 对于本地服务,有两种类型,一中是绑定进行数据交流,一种是不绑定的,生命周期如下图:

  4. LeetCode(30)-Pascal's Triangle

    题目: Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, ...

  5. LeetCode（40）-Merge Sorted Array

    听到初爱有感 开头啰嗦两句,刚在做算法题目的时候,听到了杨宗纬的<初爱>,突然有了一种本科时候的感觉,想想自己现在研二了,青春喂了狗,我果断喝了一罐啤酒,循环这首歌到吐-.. 题目: Gi ...

  6. C# 视频多人脸识别

    上一篇内容的调整,并按 @轮回 的说法,提交到git了,https://github.com/catzhou2002/ArcFaceDemo 基本思路如下: 一.识别线程 1.获取当前图片 2.识别当 ...

  7. c# 获取TFS结构 文件

    #region 获取最新版本 /// <summary> /// 获取最新版本 /// </summary> /// <param name="server_u ...

  8. Swap Nodes in Pairs(交换节点)

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  9. ffmpeg转换参数和压缩输出大小的比率 参考 最新版本FFMPEG

    https://blog.cnlabs.NET/3668.html ffmpeg 转换压缩比例 FFMPEG如果是压缩为FLV文件 3个编码可选1. -c:v flv 标准FLV编码 这个好处是速度快 ...

  10. Android 路由框架ARouter最佳实践

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/76165252 本文出自[赵彦军的博客] 一:什么是路由? 说简单点就是映射页面跳转 ...