CSS3 多列布局的跨列

默认情况下，多列容器中的内容，会一列一列地自动填充。但有时候，却需要其中的某些内容（如，文章标题）不是多列布局，而是横跨所有列。

要实现类似报纸、杂志上的跨列效果，就可以使用 column-span属性，来控制多列容器中的某个子元素是否横跨所有列，取值为 none | all。none 表示不跨列，all 表示横跨所有列。

如，在上述结构中增加一个 h2 标题和若干个段落，为了节省篇幅，用（…）代替略去的内容：

<div>
<p>在CSS3之前，要…实现起来也很困难。</p>
<p>CSS3多列布局的出现，彻底改变…分布到多列网格中。</p>
<h2>跨列</h2>
<p>从前面的介绍可知，多列容器中…就需要用到column-span属性。</p>
</div>

如果希望 h2 标题能够横跨所有列，而不使用多列布局，就需要把 column-span属性的值显式设置为 all：

div {
-webkit-column-count: 3;
}
div p {
text-indent: 2em;
}
div h2 {
background: #ccc;
-webkit-column-span: all;
}

上述代码的运行结果如图 9‑8 所示：

图9-8 column-span属性效果

从上图可以看出，h2 标题将文章的内容分成了相互独立的两个部分，每部分依然是一个 3 列布局，而 h2 标题独自横跨三列。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS3 多列布局的跨列相关推荐

html 三列布局（两列自适应，一列固定宽度）
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释...
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...
css 列布局,CSS二列三列布局
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法二列&三列布局: image.png 二列布局的特征通常是侧栏固定宽度,主栏自适应宽度三列布局的特征通常 ...
两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
单列布局、两列布局、三列布局
一. 单列布局 HTML 代码: 1 <div id="header"> 2 <h2>Page Header</h2> 3 < ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
flex两列布局以及三列布局
flex两列布局左固定右适应: <div class="a"><div class="a1"></div><div ...
html怎么跨列居中,如何跨列居中
语音内容: 大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以Excel2010为例,其跨列居中的方法是: 1.首先打开Excel2010表格,随后选中所有标题居中且需要的单元格 ...

CSS3 多列布局的跨列

CSS3 多列布局的跨列相关推荐

最新文章

热门文章