Learn how to use CSS columns to quickly lay out fluid columns that are responsive, degrade gracefully and don't require extra markup.

Notes:

  • column-width operates like min-width, not width. The browser will render as many columns as it can with the width provided. If each column can take up more than the value provided, they will do so.
  • column-span enables a specific element to ignore column-count and column-width. It can be set to an integer to span a certain number of columns, or "all" to span them all. However, this property does not work in Firefox. A workaround could be to move the element (say, a heading) outside of the container with the columns applied to it. That way, it remains outside of the automatic column flow.
  • column-fill allows you to change the way content flows into columns. By default, it's set to "balance", where content is distributed as much as possible between columns. It can also be set to "auto", but in order to do so, it requires setting a fixed height. This breaks the idea of fluid, responsive layouts, so use it with caution. You'll also need some browser prefixes, so be sure to reference thisbrowser support chart.
<!DOCTYPE html>

<html>

<head>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <section>

    <h class="title">News</div>

    <nav>

      <ul>

        <li><a href="#">World</a></li>

        <li><a href="#">U.S.</a></li>

        <li><a href="#">Politics</a></li>

        <li><a href="#">Business</a></li>

        <li><a href="#">Sports</a></li>

        <li><a href="#">Health</a></li>

        <li><a href="#">Tech</a></li>

        <li><a href="#">Science</a></li>

        <li><a href="#">Education</a></li>

        <li><a href="#">Books</a></li>

        <li><a href="#">Food</a></li>

        <li><a href="#">Movies</a></li>

        <li><a href="#">TV</a></li>

        <li><a href="#">Automobiles</a></li>

        <li><a href="#">Real Estate</a></li>

        <li><a href="#">Jobs</a></li>

        <li><a href="#">Art & Design</a></li>

        <li><a href="#">Travel</a></li>

        <li><a href="#">Subscribe</a></li>

        <li><a href="#">Archives</a></li>

      </ul>

    </nav>

  </section>

</body>

</html>
/* Demo only styles */

* {

  box-sizing: border-box;

}

body {

  background: #eee;

  font-family: 'Karla', sans-serif;

  font-size: 18px;

  font-weight: bold;

}

section {

  padding: 0 2rem;

  margin: 0 auto;

}

ul {

  list-style: none;

  padding:;

  margin:;

}

li {

  padding: 0.5rem 0;

}

a {

  padding: 2px 5px;

  border-radius: 3px;

  color: #1A4390;

}

a:hover {

  text-decoration: none;

  background-color: #1A3490;

  color: #FFF;

}

nav{

  columns: 3 150px;

  column-gap: 3rem;

  column-rule: 1px dashed #ccc;

  column-fill: balance;

}

.title{

  column-span: all;

}

[CSS] Introduction to CSS Columns的更多相关文章

  1. 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

  2. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  3. 前端开发人员要注意的css规范，css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  4. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  6. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  7. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  8. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  9. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

随机推荐

  1. python的使用环境总结

    python在linux上运行,使用的是vim,每次都是敲四个空格进行缩进,真尼玛的蛋疼,书本果然是个好东西,从而根据书本python高级编程中的设置配置而来: 1.进行自动补全的脚本 [root@p ...

  2. C语言部分

    1.内核的裁剪怎么裁剪 2.深入理解uboot 3.TCP/IP TCP/UDP原理是什么? 4.项目里你做了些什么?怎么做的?为什么要那样做? 5.指针与数组的用法及计算 6.单链表和双链表的用法 ...

  3. bzoj 3270 博物馆（高斯消元）

    [题意] 两人起始在s,t点,一人pi概率选择留在i点或等概率移动,问两人在每个房间相遇的概率. [思路] 把两个合并为一个状态,(a,b)表示两人所处的状态,设f[i]为两人处于i状态的概率.则有转 ...

  4. 黑马程序员——Objective-c特性

    1. 继承  Objective-c不支持多继承. Super 关键字:调用该类的父类: 超类:父类的另一种说法. 2.自定义NSLog()输出: 在类中添加description方法就可以自定义NS ...

  5. jQuery hover demo

    先放效果图: 百度云下载地址:http://pan.baidu.com/s/1dDpn1Sl 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  6. hadoop中HBase子项目入门讲解

    HBase 是Hadoop的一个子项目,HBase采用了Google BigTable的稀疏的,面向列的数据库实现方式的理论,建立在hadoop的hdfs上,一方面里用了hdfs的高可靠性和可伸缩行, ...

  7. Thu夏令营 总结

    感觉这次thu夏令营简直就是爆RP啊 竟然签了无条件本一 [Waring]RP已空 话说这次考试设定 竟然是下午两点开始考试 考到五点- - 导致中午必须午睡 宾馆里清华也不近 按原本试机安排到12点 ...

  8. 轻松学Shell之认识正规表达式

    离线下载观看:http://down.51cto.com/data/148117   650) this.width=650;" onclick='window.open("htt ...

  9. 麒麟OS剽窃

    今年对于我们的IT行业来说可以算是耻辱的一年. 首先是“汉芯丑闻”,上海交大研制了一个所谓的国内第一个完全拥有自主知识产 权的DSP芯片(数字信号微处理器)——“汉芯”,研制人陈进教授以此领取政府一亿 ...

  10. IDE Plug

    IDE Plug 使用 cnpack提供的IDE External Wizard Management 管理插件.添加插件.删除插件 Cnpack D:\Program Files (x86)\CnP ...