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. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  2. Winform後台如何動態修改App.config文件里的內容

    以下方法修改的,自己添加的app.config裡面不會顯示出修改的東西. 方法一:通過使用System.Xml.XmlDocument對象的方法進行bin\debug\~.vshost.exe.Con ...

  3. （转载）OC学习篇之---Foundation框架中的其他类(NSNumber,NSDate,NSExcetion)

    前一篇说到了Foundation框架中的NSDirctionary类,这一一篇来看一下Foundation的其他常用的类:NSNumber,NSDate,NSException. 注:其实按照Java ...

  4. Tilera 服务器上OpenJDK的安装尝试

    一.起因 这两天比较有意思,客户那里的代码遇到了一个jvm的bug崩溃了,所以老板让我升级JVM,这是一个处理器架构和x86不同的处理器,我改怎么安装呢? 我百度了OpenJDK,并且按照http:/ ...

  5. c++builder Color

    procedure ExtractRGB(const Color: Graphics.TColor; out Red, Green, Blue: Byte); var RGB: Windows.TCo ...

  6. 【转】Java transient关键字

    Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看到某个成员变量的同一 ...

  7. AutoCAD.NET 不使用P/Invoke方式调用acad.exe或accore.dll中的接口（如acedCommand、acedPostCommand等）

    使用C#进行AutoCAD二次开发,有时候由于C#接口不够完善,或者低版本AutoCAD中的接口缺少,有些工作不能直接通过C#接口来实现,所以需要通过P/Invoke的方式调用AutoCAD的其他DL ...

  8. HDU4289Control(最大流)

    看了这道题,然后重新开始练习自己的刚敲不久的网络流,发现还是难以一遍敲得完整啊,,,,, 调了...遍,改了...遍,测了...遍,交了,,,遍,总算是A了,,不简单啊 然后试着用了其他两种算法EK和 ...

  9. [源码分享] HIVE表数据量统计&邮件

    概要: 计算HIVE BI库下每天数据表总大小及增量 输出: 总大小:xxxG 日同比新增数据量:xxxG 周同比新增数据量:xxxG 月同比新增数据量:xxxG 总表数:xxx 日新增表数:xxx ...

  10. Json.Net学习笔记

    http://www.cnblogs.com/xiaojinhe2/archive/2011/10/28/2227789.html Newtonsoft.Json(Json.Net)学习笔记 http ...