CSS3 多列
Posted 自学web网页前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 多列相关的知识，希望对你有一定的参考价值。
多列属性：
column-count
column-gap
column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性。
column-count 属性规定元素应该被分隔的列数：
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<p><b>注释：</b>Internet Explorer 不支持 column-count 属性。</p>
<div class="newspaper">
有一个女孩，高中毕业后没有考上大学，被安排在本村的小学教书。结果，不到一星期就回了家。
母亲安慰她：满肚子的东西，有的人倒得出来，有的人倒不出来，你不会教书不要紧，也许有更合适的事情等着你去做。
后来，这女孩先后当过纺织工，干过市场管理员，做过会计，但是无一例外都半途而废了。
然而，每次女儿失败回来，母亲总是安慰她，从来没有抱怨的话。
30岁的时候，女儿做了聋哑学校的一位辅导员，后来又开办了一家自己的残障学校，并且在许多城市开办了残障人用品连锁店，有了自己的一片天地。
有一天，功成名就的女儿问母亲：那些年我连连失败，自己都觉得前途非常渺茫，可你为什么总对我那么有信心呢？
母亲的回答朴素而简单：“一块地，不适合种麦子，可以试试种豆子；豆子也种不好的话，可以种瓜果；瓜果也种不好的话，也许能种荞麦。终归会有一粒种子适合它，也总会有属于它的一片收成。”
</div>
</body>
</html>
运行结果
column-gap 属性规定列之间的间隔：
规定列之间 40 像素的间隔：
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
运行结果
column-rule 属性设置列之间的宽度、样式和颜色规则。
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
运行结果
以上是关于CSS3 多列的主要内容，如果未能解决你的问题，请参考以下文章