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. pku3664 Election Time

    http://poj.org/problem?id=3664 水题 #include <stdio.h> #include <map> using namespace std; ...

  2. MoveTo和MoveBy

    cc.MoveTo是“移动到这里",而cc.MoveBy则是“相对于之前点再移动”,通俗一点就是说这里需要两个坐标pos1(x1,y1),pos2(x2,y2). 如果是cc.MoveTo的 ...

  3. webrtc--AudioProcessing的使用

    1.AudioProcessing的实例化和配置: AudioProcessing* apm = AudioProcessing::Create(0); apm->level_estimator ...

  4. Unity3D Persistent Storage

    [Unity3D Persistent Storage] 1.PlayerPrefs类以键值对的形式来提供PersistentStorage能力.提供小额存储能力.(做成sst可以提供大规模数据存储) ...

  5. 用shell求两个文件的差集

    假设有两个文件a.file和b.file,分别代表集合A和集合B. a.file的内容如下: abcde b.file的内容如下: cdefg 可以用grep命令 grep命令是常用来搜索文本内容的, ...

  6. cvc-elt.1: Cannot find the declaration of element 'beans'

    @(编程) 现象描述 导入的一个eclipse项目报错,各种方法都无法解决,报错信息如下: cvc-elt.1: Cannot find the declaration of element 'bea ...

  7. Windows7部署WordPress傻瓜式教程（IIS7.5+MySQL+PHP+WordPress）

    http://www.cnblogs.com/vengen/archive/2010/01/01/WordPressInstall.html

  8. Unity3d:Unknown type 'System.Collections.Generic.CollectionDebuggerView'1

    问题描述:如图,在调试状态下说:Unknown type 'System.Collections.Generic.CollectionDebuggerView'1<ignore_js_op> ...

  9. Jquery 校验文本框只能输入负数、小数、整数

     /*   umlzhang    date:2013-09-12   */   //检验只能输入整数,小数和负数    $(function () {          var obj = $(&q ...

  10. Jquery基础：append、prepend、after、before、appendTo的区别

    append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容. after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容. appendTo() 仍然是在被选元 ...