CSS自学笔记（15）:CSS3多列布局
在CSS3中，也新增了一些关于文本布局的几个比较简单的属性。通过这些新增的属性，我们可以对文本进行简单的排版，就想报纸和杂志那样。
新增的部分属性，以及浏览器支持情况：
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| column-count | IE | Firefox(-moz-) | Chrome(-webkit-) | Safari(-webkit-) | Opera |
| column-gap | IE | Firefox(-moz-) | Chrome(-webkit-) | Safari(-webkit-) | Opera |
| column-rule | IE | Firefox(-moz-) | Chrome(-webkit-) | Safari(-webkit-) | Opera |
注：
- 在Firefox浏览器中，要加(-moz-)前缀。
- 在Chrome和Safari浏览器中，要加(-webkit-)前缀。
- 对于IE浏览器，只支持IE10以及以上版本。
新增的属性以及描述：
| 属性 | 描述 |
|---|---|
| column-count | 定义元素应该被分隔的列数 |
| column-fill | 定义列的填充方式 |
| column-gap | 定义列之间的间隔距离 |
| column-rule | column-rule属性的简写属性，定义列之间的规则 |
| column-rule-color | 定义列之间的规则颜色 |
| column-rule-style | 定义列之间的规则样式 |
| column-rule-width | 定义列之间的规则宽度 |
| column-span | 定义元素应该横跨的列数 |
| column-width | 定义列的宽度 |
| columns | column-width 和 column-count 的简写属性 |
通过这几个新增属性的定义，我可以对文本进行简单的排版(Firefox浏览器)
*{
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule: 4px outset #ff0000;"
}
上面的CSS样式是元素中的文本分为3列，列之间的距离为40px，列之间用颜色为#ff0000、宽度为4px的线分开。
同样，我们也可以对一些元素中的内容进行排版。
例如我们可以对列表进行排版：
部分代码为(Firefox浏览器)：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
ul {
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule: 4px outset #ff0000;
}
li {
background: #0CF;
border: #069 1px solid;
display: inline-block;
width: 150px;
margin: 5px 0;
}
</style>
</head>
<body> <ul>
<li style="height:50px">1</li>
<li style="height:100px">2</li>
<li style="height:80px">3</li>
<li style="height:60px">4</li>
<li style="height:70px">5</li>
<li style="height:50px">6</li>
<li style="height:100px">7</li>
<li style="height:80px">8</li>
<li style="height:90px">9</li>
<li style="height:30px">10</li>
</ul>
</body>
</html>
CSS自学笔记（15）:CSS3多列布局的更多相关文章
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- css3 多列布局记
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...
- JAVA自学笔记15
JAVA自学笔记15 @例题1:共有5个学生,请把五个学生的信息存储到数组中,并遍历数组,并获取每个学生的信息 Students[] students=new Student[5]; Student ...
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...
- CSS3多列布局
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- css3 多列布局使用
css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
随机推荐
- [原创]Windows下Google V8 javascript引擎编译
项目用到将v8嵌入到C++的情况,公司没时间研究,只有在家研究,编译过程一堆坑.记录一下. 网上百度的都是基于vs2010,或者早版本的v8编译,最新版本应该使用vs2013\vs2015.本文介绍的 ...
- 如何查找ORACLE中的跟踪文件
一.跟踪文件是干什么用的? 跟踪文件中包含了大量而详细的诊断和调试信息.通过对跟踪文件的解读和分析,我们可以定位问题.分析问题和解决问题.从跟踪文件的产生的来源来看,跟踪文件又可以分为两 ...
- ORACLE CASE函数 .
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- Mobile Matrices
This is an attempt to compile a list of relevant specifications for all modern smart phones and mobi ...
- C++中的类和对象(二)
一,对象的动态建立和释放 1.什么是对象的动态建立和释放 通常我们创建的对象都是由C++编译器为我们在栈内存中创建的,我们无法对其进行生命周期的管理.所以我们需要动态的去建立该对象,因此我们需要在堆内 ...
- Thinking in Java——集合(Collection)
一.ArrayList的使用(略) 二.容器的基本概念 (一).Collection是集合类的基本接口 主要方法: public interface Collection<E>{ bool ...
- python运维开发(八)----面向对象（下）
内容目录: 面向对象三大特性之多态性 面向对象中的成员:字段.方法.属性 类的成员修饰符 类的特殊成员 特殊成员方法 面向对象其他 异常处理 设计模式之单例模式 面向对象的多态性 多态性:即指多种形态 ...
- python基础教程第5章——条件循环和其他语句
1.语句块是在条件为真(条件语句)时执行或者执行多次(循环语句)的一组语句.在代码前放置空格来缩进语句即可穿件语句块.块中的每行都应该缩进同样的量.在Phyton中冒号(:)用来标识语句块的开始,块中 ...
- Django 1.6 基于类的通用视图
Django 1.6 基于类的通用视图 最初 django 的视图都是用函数实现的,后来开发出一些通用视图函数,以取代某些常见的重复性代码.通用视图就像是一些封装好的处理器,使用它们的时候只须要给出特 ...
- humble number(hd1058)
Problem Description A number whose only prime factors are 2,3,5 or 7 is called a humble number. The ...