开发者学堂课程【HTML5 新特性学习:多列】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/396/detail/5060
多列
通过CSS3,您能够创建多个列来对文本进行布局-就像报纸那样
属性:
column-count
column-gap
column-rule
浏览器支持:
Internet Explorer 10 和 Opera 支持多列属性
Firefox 需要前缀 -moz-
Chrome 和 Safari 需要前缀 -webkit-
百度搜索“哈哈”,随便找一个新闻,放一个 div
将其分列,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8*>
<title></title>I
< /style>
div{
<style>
div{
column-count:3;
-webkit-column-count: 3
column-gap:100px;
-webkit-column-gap: 100px
column-rule: 4px outset #ff0000;
-webkit-column-rule:4px outset #ffeeee;
< /style>
</head>
<body>
<div>
北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的- -场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比-场比赛中,
北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
比 北京时间10月18日凌晨,2015/2016赛季西甲联赛第8轮的一场比赛中,巴塞罗那坐镇主场诺坎普迎战巴列卡诺。
/div>
</body>
</html>