CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:

  • column-count: 列数目
  • column-gap: 各列之间间隙宽度
  • column-width: 建议宽度;未必会使用,浏览器基于此数值进行计算
  • column-rule-width:列之间分割线宽度
  • column-rule-style:列之间分割线风格
  • column-rule-color:列之间分割线演示
  • column-span: 允许一个元素的宽度跨越多列
  • column-fill: 分列方式

要想制作出一个漂亮的分列布局,你至少需要用到column-countcolumn-gap

/* 3 列,每列之间10px间距 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
}

如果你想美化一下列之间的空隙,这也很简单:

/*  3 列,每列之间10px间距 ,带有金色的隔离线 */
ul.col-3 {
column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;
}

指定的元素还可以横跨多列:

/* 以下面的HTML为例:

<div>
<h3>表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div> */
div.col-3 {
column-count: 3;
column-gap: 5px;
} div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;
}

非常的简单,而且显示结果完全符合我们的预期!

使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。

原文来自:webhek

CSS3 Columns:比table更好用的分列式布局方法的更多相关文章

  1. 结合CSS3的布局新特征谈谈常见布局方法

    写在前面最近看到<图解CSS3>的布局部分,结合自己以前阅读过的一些布局方面的知识,这里进行一次基于CSS2.3的各种布局的方法总结. 常见的页面布局 在拿到设计稿时,作为一个前端人员,我 ...

  2. django.db.utils.OperationalError: (1050, "Table '表名' already exists)解决方法

    django.db.utils.OperationalError: (1050, "Table '表名' already exists)解决方法 找到解决方案,执行: python mana ...

  3. mysql You can't specify target table for update in FROM clause解决方法

    mysql You can't specify target table for update in FROM clause解决方法出现这个错误的原因是不能在同一个sql语句中,先select同一个表 ...

  4. DL,DT,DD,比传统table更语义,解析更快的table列表方式

    使用dl,dt,dd替代传统的table布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  5. CSS/CSS3中的原生变量var详解以及布局响应式网页扩展

    使用语法 首先我们先来看一个例子:html代码: <div class="element">这是一段文字</div> css代码: .element { w ...

  6. CSS3中新颖的布局方法

    本人已经很久没用 bootstrap 什么的了,而现阶段一点卑微的梦想就是自己做框架,毕竟也才入门不久. 所以在寻找布局的共通性/稳定性及拓展性时,会发觉 CSS3 的这三种方法比栅栏布局要有趣得多. ...

  7. JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  8. 更优雅的清除浮动float方法

    上篇文章是利用 :after 方法清除浮动float(作用于浮动元素的父元素上). ; } //为了兼容性,因为ie6/7不能使用伪类,所以加上此行代码. .outer:after {;;visibi ...

  9. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

随机推荐

  1. GIS制图课程目录

    由于更新次序跳跃式更新,因此很有必要整理一下全书目录,并将会按照实际学习的顺序进行更新. [前言] GIS制图课程前言 [理论篇] 理论篇-地图学与GIS制图的基础理论(一) 理论篇-地图学与GIS制 ...

  2. Android搜索框以及内容提供器

    先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...

  3. 游戏UI框架设计(一) : 架构设计理论篇

    游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...

  4. R系列:关联分析;某电商平台的数据;做捆绑销售和商品关联推荐

    附注:不要问我为什么写这么快,是16年写的. 一.分析目的 I用户在某电商平台买了A,那么平台接下来应该给用户推荐什么,即用户在买了商品A之后接下来买什么的倾向性最大: II应该把哪些商品在一起做捆绑 ...

  5. Oracle11G卸载教程

    用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢?那就是直接注册表清除,步骤如下: 1. 开始->设置->控制面板-& ...

  6. Android Realm数据库使用指南

    Android Realm数据库使用指南 Realm数据库, 目前有Java, Objective‑C, React Native, Swift, Xamarin的几种实现, 是一套用来取代SQLit ...

  7. 读书笔记 effective c++ Item 24 如果函数的所有参数都需要类型转换,将其声明成非成员函数

    1. 将需要隐式类型转换的函数声明为成员函数会出现问题 使类支持隐式转换是一个坏的想法.当然也有例外的情况,最常见的一个例子就是数值类型.举个例子,如果你设计一个表示有理数的类,允许从整型到有理数的隐 ...

  8. UE4从零搭建CF游戏关卡(蓝图篇)

    一 往关卡中放置物体 二 Static Mesh 和 BSP 从今天开始我们要建立一个类似CF游戏的场景,不写一句代码,纯蓝图实现. 三 英语学习 今天早上开会,经理说了一件让我震惊的事情,她说最近大 ...

  9. 日常:css样式、选择器、个别知识点、数组array

    优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...

  10. java 完全二叉树的构建与四种遍历方法

    本来就是基础知识,不能丢的太干净,今天竟然花了那么长的时间才写出来,记一下. 有如下的一颗完全二叉树: 先序遍历结果应该为:1  2  4  5  3  6  7 中序遍历结果应该为:4  2  5 ...