[CSS] Introduction to CSS Columns

时间：2022-12-10 21:30:46

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&plus;CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

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

  2. CSS技巧----DIV&plus;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&plus;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. &lbrack;转&rsqb;Android样式的开发&colon;shape篇

    转载自Keegan小钢原文链接:http://keeganlee.me/post/android/20150830 Android样式的开发:shape篇Android样式的开发:selector篇A ...

  2. 搜集资料&amp&semi;安装环境

    开始入坑DSP,芯片是TI的TMS320C6678,硬件平台为TI官方的TMS320C6678L开发板. 官方给的资料有很多,各种用户手册.软件支持包,眼花缭乱.先尝试把开发环境搭起来,跑个Hello ...

  3. Android 判断字符串是否为空

    TextUtils.isEmpty(str) 可以判断字符串是否为null或者"",当是的时候为true,否的时候为false

  4. Ubuntu中Apache修改DocumentRoot&lpar;修改网站根目录&rpar;

    今天配置好Apache+PHP+MySQL但是apache默认DocumentRoot是/var/www想把它改到我Windows下进行测试的k:/wwwroot把 apache2.conf 翻了好几 ...

  5. Java基础知识强化之IO流笔记31：转换流出现的原因和格式

    1. 由于字节流操作中文不是特别方便,所以Java就提供了转换流.  字符流 = 字节流 + 编码表 2. 编码表 由字符及其对应数值组成的一张表 常见的编码表: • ASCII/Unicode字符集 ...

  6. Cloudera Manager&lpar;CentOS&rpar;安装介绍

    相信通过这篇文章大家都对Cloudera Manager及CDH安装有一个整体的认识 目 录 1           准备工 作.................................... ...

  7. 论文泛读&&num;183&semi;Adversarial Learning for Neural Dialogue Generation

    原文翻译 导读 这篇文章的主要工作在于应用了对抗训练(adversarial training)的思路来解决开放式对话生成(open-domain dialogue generation)这样一个无监 ...

  8. Java 日志体系（二）jcl 和 slf4j

    Java 日志体系(二)jcl 和 slf4j <java 日志体系(一)统一日志>:https://www.cnblogs.com/binarylei/p/9828166.html &l ...

  9. HDR 视频编码

    前转换以及后转换:-f xxx.cfg (以及注意工作目录以及路径名/和//) HEVC视频编码:-c xxx.cfg  -c xx.cfg(视频的配置文件)

  10. Codeforces Round &num;396 &lpar;Div&period; 2&rpar; D&period; Mahmoud and a Dictionary 并查集

    D. Mahmoud and a Dictionary 题目连接: http://codeforces.com/contest/766/problem/D Description Mahmoud wa ...

相关文章