-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-05-11
来源 ：
阅读 1072
评论 0
摘要：css3多列能够创建多个列来对文本进行布局，就像报纸那样。本文讲解了关于多列的相关属性及属性值，希望对大家有所帮助，HTML5+CSS3从入门到精通。
css3多列能够创建多个列来对文本进行布局，就像报纸那样。
关于多列的相关属性及属性值如下：
column-count: number|auto;：指定元素应分为的列数。
column-fill: 指定如何填充列
balance：(默认)列的高度尽量均衡
auto： 顺序填充内容高度可能差距很大。
column-gap: 指定列之间的间距。
length： 一个指定的长度，将设置列之间的差距
normal： (默认值)W3C建议1em值
column-rule-color：指定列之间的颜色规则。
column-rule-style：指定列之间的样式规则。
none： (默认)定义没有规则。
hidden: 定义隐藏规则。
dotted: 定义点状规则。
dashed: 定义虚线规则。
solid: 定义实线规则。
double: 定义双线规则。
groove：列之间的分隔线显示为内陷浮雕效果。
ridge： 列之间的分隔线显示为外凸浮雕效果。
inset： 列之间的分隔线显示为内斜面效果。
outset：列之间的分隔线显示为外斜面效果。
column-rule-width: 指定列之间的宽度。
thin： 指定一个细边框的规则
medium: (默认)定义一个中等边框规则
thick: 指定一个粗边框的规则
length: 指定具体长度宽度
column-rule：上面三个属性的简写。指定列之间的规则：宽度，样式和颜色。
语法：
column-rule: column-rule-width属性值 column-rule-style属性值 column-rule-color属性值;
column-span: 指定某个元素应该跨越多少列.
1: (默认)元素应跨越一列
all: 该元素应该跨越所有列
column-width: 指定列的宽度.
auto: (默认)浏览器将决定列的宽度
length: 指定列宽的长度
Columns:一个速记属性设置列宽和列数。
columns: column-width属性值 column-count属性值;
下面是一个简单的演示代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试代码</title>
<style>
.newspaper
{
/*为了减少代码量，就没写-webkit-、-moz-等浏览器支持*/
height: 300px;
column-count:2;
column-gap: 40px;
column-fill: auto;
column-rule-style: solid;
column-rule-width: 20px;
column-rule-color: #117DC3;
column-width: 400px;
}
h1{
font-size: 20px;
column-span: all;
}
</style>
</head>
<body>
<p class="newspaper">
<h1>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</h1>
<!--这里是很多文本。-->
</p>
</body>
</html>
本文由职坐标整理发布，更多相关知识请关注职坐标HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
