CSS3 多列布局——Columns
CSS3 多列布局——Columns
语法：
columns：<column-width> || <column-count>
多列布局columns属性参数主要就两个属性参数：列宽和列数。
|
参数 |
参数说明 |
|
<column-width> |
主要用来定义多列中每列的宽度 |
|
<column-count> |
主要用来定义多列中的列数 |
实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局——Columns</title>
<style type="text/css">
.columns{
width: 500px ;
padding:5px;
border:2px solid slateblue;
margin: 40px auto;
-webkit-columns:100px ;
-moz-columns: 100px ;
-o-columns:100px ;
-ms-columns: 100px ;
columns: 100px ; }
h1{
color:blue;
} </style>
</head>
<body>
<div class="columns">
<h1>我要分列显示</h1>
<p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div> </body>
</html>
效果：
CSS3 column-count 属性
column-count 属性规定元素应该被划分的列数。
语法
column-count: number|auto;
值描述测试number元素内容将被划分的最佳列数。
auto由其他属性决定列数，比如 "column-width"。
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局——Columns</title>
<style type="text/css">
.columns{
width: 500px ;
padding:5px;
border:2px solid slateblue;
margin: 40px auto;
-moz-column-count:; /* Firefox */
-webkit-column-count:; /* Safari and Chrome */
column-count:; } </style>
</head>
<body>
<div class="columns"> <p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div> </body>
</html>
效果：
CSS3 column-gap 属性
column-gap 属性规定列之间的间隔。
注释：如果列之间设置了 column-rule，它会在间隔中间显示。
语法
column-gap: length|normal;
| length | 把列间的间隔设置为指定的长度。 | |
| normal | 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 |
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局——Columns</title>
<style type="text/css">
.columns{
width: 500px ;
padding:5px;
border:2px solid slateblue;
margin: 40px auto;
-moz-column-count:; /* Firefox */
-webkit-column-count:; /* Safari and Chrome */
column-count:;
column-gap:50px; } </style>
</head>
<body>
<div class="columns"> <p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div> </body>
</html>
效果：
CSS3 column-rule 属性
规定列之间的宽度、样式和颜色规则：
语法
column-rule: column-rule-width column-rule-style column-rule-color;
| 值 | 描述 |
|---|---|
| column-rule-width | 设置列之间的宽度规则。 |
| column-rule-style | 设置列之间的样式规则。 |
| column-rule-color | 设置列之间的颜色规则。 |
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局——Columns</title>
<style type="text/css">
.columns{
width: 500px ;
padding:5px;
border:2px solid slateblue;
margin: 40px auto;
-moz-column-count:; /* Firefox */
-webkit-column-count:; /* Safari and Chrome */
column-count:; column-gap:50px;
-moz-column-gap:50px; /* Firefox */
-webkit-column-gap:50px; /* Safari and Chrome */ -moz-column-rule: 5px outset blue;
-webkit-column-rule: 5px outset blue;
column-rule: 5px outset blue;
} </style>
</head>
<body>
<div class="columns"> <p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div> </body>
</html>
效果：
CSS3 column-width 属性
column-width 属性规定列的宽度。
语法
column-width: auto|length;
| 值 | 描述 | |
|---|---|---|
| auto | 由浏览器决定列宽。 | |
| length | 规定列的宽度。 |
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局——Columns</title>
<style type="text/css">
.columns{
width: 500px ;
padding:5px;
border:2px solid slateblue;
margin: 40px auto; -moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
column-width:100px; } </style>
</head>
<body>
<div class="columns"> <p>
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
软泥上的青荇，
油油的在水底招摇；
在康河的柔波里，
我甘心做一条水草！
那榆荫下的一潭，
不是清泉，
是天上虹；
揉碎在浮藻间，
沉淀着彩虹似的梦。
寻梦？撑一支长篙，
向青草更青处漫溯；
满载一船星辉，
在星辉斑斓里放歌。
但我不能放歌，
悄悄是别离的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥！
悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。
</p>
</div> </body>
</html>
效果：
2017-08-22 19:59:44
CSS3 多列布局——Columns的更多相关文章
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- 多列布局——Columns
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...
- css3 多列布局记
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...
- CSS3多列布局
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...
- css3 多列布局使用
css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
随机推荐
- dp培训完结(8.9)
概率与期望dp 期望: 为什么下面的式子成立? 若x可以取1,2,3,则x+c可以取1+c,2+c,3+c..........x*c可以取1*c,2*c,3*c why? 举个例子(E(x+y)=E( ...
- CSS- 层叠和继承
层叠和继承 - 学习 Web 开发 | MDN 优先级 - CSS:层叠样式表 | MDN 继承 - CSS:层叠样式表 | MDN CSS 层叠 - CSS:层叠样式表 | MDN
- Vue知识整理7：vue中函数的应用
在vue中使用函数对字符串做相应的处理: split:分割字符,将每个字符分割为一个数组值: reverse:将字符进行逆序排序: join:将字符连接: 最终输出结果.
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_2_使用泛型的好处
用一个案例说明使用泛型和不是用泛型的区别 这里的ArrayList没写数据类型,不写就是默认Object 多态的弊端,不能使用子类特有的方法 向下转型,转换为String类型,才能使用length 不 ...
- 剑指offer(1)：数组
1 写作计划 最近在看<剑指offer>,发现自己有很多的数据结构与算法的基础知识要复习,<好书一起读(131):让写作更好>中提到用写作倒逼阅读,我很是赞同.所以,计划以&l ...
- Java ——Scanner
本节重点思维导图 import java.util.Scanner;//导包 public class Demo { public static void main(String[] args) { ...
- C++实现,拓展中国剩余定理——解同余方程组(理论证明和代码实现)
拓展中国剩余定理 前言 记得半年前还写过关于拓展中国剩余定理的博客...不过那时对其理解还不是比较深刻,写的也比较乱. 于是趁学校复习之机,再来重温一下拓展中国剩余定理(以下简称ExCRT) 记得半年 ...
- 浅谈vue对seo的影响
不可否定的是,vue现在火.但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前 ...
- Tomcat控制台
一般在安装完成Tomcat之后,我们需要验证tomcat是否安装成功,在浏览器的url中输入:http://127.0.0.1:8080/,就会进入如下的页面(表示安装成功): 在上面的左侧顶部,有一 ...
- SpringMvc参数绑定出现乱码解决方法
在SpringMvc参数绑定过程中出现乱码的解决方法 1.post参数乱码的解决方法 在web.xml中添加过滤器 <!-- 过滤器 处理post乱码 --> <filter> ...