css3.0学习 columns

原载于:文章来源：www.forasp.cn网站制作学习
第八节 columns

1.columns

语法：
columns:宽度 || 栏目数
相关属性：column-width,column-count

取值：
column-width:请参阅column-width属性
column-count:请参阅column-count属性

说明：
可以同时定义多栏的数目和没栏宽度

兼容性：
Chrome1.0，Chrome2.0，Safari3.1，Safari4

代码示例：
<style type="text/css" media="screen">
<!--
.wrapper {width:703px; padding:10px; margin:40px auto 0; border:1px solid #333333;}
.wrapper .inner { padding:5px 10px;}
.wrapper .inner h2 {color:#333333; background:#DCDCDC; padding:5px 8px;}
.wrapper .inner .cont {color:#333333; font-size:14px; line-height:180%; text-indent:2em;}
.wrapper .inner .cont p {margin-bottom:15px; line-height:180%;}
.wrapper .inner .cont .columns {-webkit-columns: 215px 3;}
-->
</style>
<div class="wrapper">
    <div class="inner">
        <h2>columns</h2>
        <div class="cont">
            <div class="columns">
                <p><strong>ISD Webteam</strong>是一个设计团队，即<strong>腾讯互联网业务系统网站组</strong>。</p>原文是网站制作学习网的FoAｓＰ.cn
                <p><strong>ISD Webteam</strong>关注于网站产品的体验设计，包括网站的可用性、视觉风格以及网页重构。</p>
                <p>我们的产品类型挺丰富，有<strong>空间(Qzone)</strong>，有<strong>会员(QQVIP)</strong>，有<strong>QQ秀(QQShow)</strong>，还有<strong>音乐(QQMusic)</strong>，项目挺多，工作也挺忙，无时无刻不在体现互联网行业的特征。</p>原文是网站制作学习网的FoAｓＰ.cn
                <p>我们的成员类型挺丰富，有安静的，有狂躁的，有智勇双全的，也有身can志不坚的，总体上还算相亲相爱，偶尔也会你打我闹。</p>
                <p><strong>“让我们的互联网服务像水和电一样融入到人们的生活当中”</strong>，是我们的梦想，距离目标还有很长的路要走，至今我们仍在不懈的力，如果你愿意，欢迎和我们一起。</p>
            </div>
        </div>
    </div>
</div>


2.column-width

语法：
column-width:[<length> | auto]
相关属性：columns

取值：
auto:取计算机值
<length>:由浮点数字和单位标识符组成的长度，不可为负值

说明：
可以定义没栏的宽度

兼容性：
Firefox3.5,Chrome1.0，Chrome2.0，Safari3.1，Safari4

代码示例：
<style type="text/css" media="screen">
<!--
.wrapper {width:703px; padding:10px; margin:40px auto 0; border:1px solid #333333;}
.wrapper .inner { padding:5px 10px;}
.wrapper .inner h2 {color:#333333; background:#DCDCDC; padding:5px 8px;}
.wrapper .inner .cont {color:#333333; font-size:14px; line-height:180%; text-indent:2em;}
.wrapper .inner .cont p {margin-bottom:15px; line-height:180%;}
.wrapper .inner .cont .column-width {-webkit-column-width:300px;-moz-column-width:300px;-webkit-column-count:2;-moz-column-count:2;-webkit-column-gap:50px;-webkit-column-gap:50px;}
-->
</style>
<div class="wrapper">
    <div class="inner">
        <h2>column-width</h2>

        <div class="cont">
            <div class="column-width">
                <p><strong>ISD Webteam</strong>是一个设计团队，即<strong>腾讯互联网业务原文是网站制作学习网的FoAｓＰ.cn系统网站组</strong>。</p>
                <p><strong>ISD Webteam</strong>关注于网站产品的体验设计，包括网站的可用性、视觉风格以及网页重构。</p>原文是网站制作学习网的FoAｓＰ.cn
                <p>我们的产品类型挺丰富，有<strong>空间(Qzone)</strong>，有<strong>会员(QQVIP)</strong>，有<strong>QQ秀(QQShow)</strong>，还<strong>
音乐(QQMusic)</strong>，项目挺多，工作也挺忙，无时无刻不在体现互联网行业的特征。</p>
                <p>我们的成员类型挺丰富，有安静的，有狂躁的，有智勇双全的，也有身can志不坚的，总体上还算相亲相爱，偶尔也会你打我闹。</p>
                <p><strong>“让我们的互联原文是网站制作学习网的FoAｓＰ.cn网服务像水和电一样融入到人们的生活当中”</strong>，是我们
的梦想，距离目标还有很长的路要走，至今我们仍在不懈的努力，如果你愿意，欢迎和我们一起。</p></p>
            </div>
        </div>
    </div>
</div>