CSS3多栏样式布局

看书的时候,遇到了CSS3一个新的多栏布局样式属性,测试了一下,贴段代码出来:

目前这个属性还是需要带上浏览器内核的私有前缀:

先看html代码:

1 <BODY>
2     <div class='main'>
3         <p>My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of a small country music band. They would play at local dances and on a few occasions would play for the local radio station. He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated that there was a lot of drinking and cursing the day of his audition and he did not want to be around that type of environment.</p>
4         <p>My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of a small country music band. They would play at local dances and on a few occasions would play for the local radio station. He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated that there was a lot of drinking and cursing the day of his audition and he did not want to be around that type of environment</p>
5         <p>My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of a small country music band. They would play at local dances and on a few occasions would play for the local radio station. He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated that there was a lot of drinking and cursing the day of his audition and he did not want to be around that type of environment.</p>
6     </div>
7 </BODY>

正常的显示方法是:每个p标签的内容会铺满body的宽度,各占一行.

但是加上css3中的多栏样式属性后,代码:

.main{
        /*  设置每列的宽度   */
        -webkit-column-width:400px;

        /*  把网页分成三列   */
        -webkit-column-count:3;


        /* 列之间的间距 */
        -webkit-column-gap:50px;

        
        /* 设置栏目分割线 */
        -webkit-column-rule:thin solid #999; 
        -moz-column-rule:thin solid #999;
        -moz-column-count:3;
             column-count:3;
    }

得到的结果如下图:

是不是很简单...就这样

posted @ 2014-09-28 17:03  宇宙第一小菜鸟  阅读(420)  评论(0编辑  收藏  举报