• CSS3 多列布局——Columns


    CSS3 多列布局——Columns

    语法:

    columns:<column-width> || <column-count>

    多列布局columns属性参数主要就两个属性参数:列宽和列数。

    参数

    参数说明

    <column-width>

    主要用来定义多列中每列的宽度

    <column-count>

    主要用来定义多列中的列数

    实例代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多列布局——Columns</title>
        <style type="text/css">
            .columns{
                 500px ;
                padding:5px;
                border:2px  solid slateblue;
                margin: 40px auto;
                -webkit-columns:100px 4;
                -moz-columns: 100px 4;
                -o-columns:100px 4;
                -ms-columns: 100px 4;
                columns: 100px 4;
    
            }
            h1{
                color:blue;
            }
    
    
        </style>
    </head>
    <body>
    <div class="columns">
        <h1>我要分列显示</h1>
        <p>
            轻轻的我走了,
            正如我轻轻的来;
            我轻轻的招手,
            作别西天的云彩。
             
            那河畔的金柳,
            是夕阳中的新娘;
            波光里的艳影,
            在我的心头荡漾。
             
            软泥上的青荇,
            油油的在水底招摇;
            在康河的柔波里,
            我甘心做一条水草!
             
            那榆荫下的一潭,
            不是清泉,
            是天上虹;
            揉碎在浮藻间,
            沉淀着彩虹似的梦。
             
            寻梦?撑一支长篙,
            向青草更青处漫溯;
            满载一船星辉,
            在星辉斑斓里放歌。
             
            但我不能放歌,
            悄悄是别离的笙箫;
            夏虫也为我沉默,
            沉默是今晚的康桥!
             
            悄悄的我走了,
            正如我悄悄的来;
            我挥一挥衣袖,
            不带走一片云彩。
        </p>
    </div>
    
    </body>
    </html>

    效果:

    CSS3 column-count 属性

    column-count 属性规定元素应该被划分的列数。

    语法

    column-count: number|auto;

    值描述测试number元素内容将被划分的最佳列数。

    auto由其他属性决定列数,比如 "column-width"。

    代码实例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多列布局——Columns</title>
        <style type="text/css">
            .columns{
                 500px ;
                padding:5px;
                border:2px  solid slateblue;
                margin: 40px auto;
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari and Chrome */
                column-count:3;
    
            }
    
    
    
        </style>
    </head>
    <body>
    <div class="columns">
    
        <p>
            轻轻的我走了,
            正如我轻轻的来;
            我轻轻的招手,
            作别西天的云彩。
            那河畔的金柳,
            是夕阳中的新娘;
            波光里的艳影,
            在我的心头荡漾。
            软泥上的青荇,
            油油的在水底招摇;
            在康河的柔波里,
            我甘心做一条水草!
            那榆荫下的一潭,
            不是清泉,
            是天上虹;
            揉碎在浮藻间,
            沉淀着彩虹似的梦。
            寻梦?撑一支长篙,
            向青草更青处漫溯;
            满载一船星辉,
            在星辉斑斓里放歌。
            但我不能放歌,
            悄悄是别离的笙箫;
            夏虫也为我沉默,
            沉默是今晚的康桥!
            悄悄的我走了,
            正如我悄悄的来;
            我挥一挥衣袖,
            不带走一片云彩。
        </p>
    </div>
    
    </body>
    </html>

    效果:

    CSS3 column-gap 属性

    column-gap 属性规定列之间的间隔。

    注释:如果列之间设置了 column-rule,它会在间隔中间显示。

    语法

    column-gap: length|normal;
    length 把列间的间隔设置为指定的长度。  
    normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

    代码实例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多列布局——Columns</title>
        <style type="text/css">
            .columns{
                 500px ;
                padding:5px;
                border:2px  solid slateblue;
                margin: 40px auto;
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari and Chrome */
                column-count:3;
                column-gap:50px;
    
            }
    
    
    
        </style>
    </head>
    <body>
    <div class="columns">
    
        <p>
            轻轻的我走了,
            正如我轻轻的来;
            我轻轻的招手,
            作别西天的云彩。
            那河畔的金柳,
            是夕阳中的新娘;
            波光里的艳影,
            在我的心头荡漾。
            软泥上的青荇,
            油油的在水底招摇;
            在康河的柔波里,
            我甘心做一条水草!
            那榆荫下的一潭,
            不是清泉,
            是天上虹;
            揉碎在浮藻间,
            沉淀着彩虹似的梦。
            寻梦?撑一支长篙,
            向青草更青处漫溯;
            满载一船星辉,
            在星辉斑斓里放歌。
            但我不能放歌,
            悄悄是别离的笙箫;
            夏虫也为我沉默,
            沉默是今晚的康桥!
            悄悄的我走了,
            正如我悄悄的来;
            我挥一挥衣袖,
            不带走一片云彩。
        </p>
    </div>
    
    </body>
    </html>

    效果:

    CSS3 column-rule 属性

    规定列之间的宽度、样式和颜色规则:

    语法

    column-rule: column-rule-width column-rule-style column-rule-color;
    描述
    column-rule-width 设置列之间的宽度规则。
    column-rule-style 设置列之间的样式规则。
    column-rule-color 设置列之间的颜色规则。

    代码实例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多列布局——Columns</title>
        <style type="text/css">
            .columns{
                 500px ;
                padding:5px;
                border:2px  solid slateblue;
                margin: 40px auto;
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari and Chrome */
                column-count:3;
    
                column-gap:50px;
                -moz-column-gap:50px; /* Firefox */
                -webkit-column-gap:50px; /* Safari and Chrome */
    
                -moz-column-rule: 5px outset blue;
                -webkit-column-rule: 5px outset blue;
                column-rule: 5px outset blue;
            }
    
    
    
        </style>
    </head>
    <body>
    <div class="columns">
    
        <p>
            轻轻的我走了,
            正如我轻轻的来;
            我轻轻的招手,
            作别西天的云彩。
            那河畔的金柳,
            是夕阳中的新娘;
            波光里的艳影,
            在我的心头荡漾。
            软泥上的青荇,
            油油的在水底招摇;
            在康河的柔波里,
            我甘心做一条水草!
            那榆荫下的一潭,
            不是清泉,
            是天上虹;
            揉碎在浮藻间,
            沉淀着彩虹似的梦。
            寻梦?撑一支长篙,
            向青草更青处漫溯;
            满载一船星辉,
            在星辉斑斓里放歌。
            但我不能放歌,
            悄悄是别离的笙箫;
            夏虫也为我沉默,
            沉默是今晚的康桥!
            悄悄的我走了,
            正如我悄悄的来;
            我挥一挥衣袖,
            不带走一片云彩。
        </p>
    </div>
    
    </body>
    </html>

    效果:

    CSS3 column-width 属性

    column-width 属性规定列的宽度。

    语法

    column- auto|length;

     

    描述 
    auto 由浏览器决定列宽。  
    length 规定列的宽度。

     
    代码实例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>多列布局——Columns</title>
        <style type="text/css">
            .columns{
                 500px ;
                padding:5px;
                border:2px  solid slateblue;
                margin: 40px auto;
    
    
                -moz-column-100px; /* Firefox */
                -webkit-column-100px; /* Safari and Chrome */
                column-100px;
    
            }
    
    
    
        </style>
    </head>
    <body>
    <div class="columns">
    
        <p>
            轻轻的我走了,
            正如我轻轻的来;
            我轻轻的招手,
            作别西天的云彩。
            那河畔的金柳,
            是夕阳中的新娘;
            波光里的艳影,
            在我的心头荡漾。
            软泥上的青荇,
            油油的在水底招摇;
            在康河的柔波里,
            我甘心做一条水草!
            那榆荫下的一潭,
            不是清泉,
            是天上虹;
            揉碎在浮藻间,
            沉淀着彩虹似的梦。
            寻梦?撑一支长篙,
            向青草更青处漫溯;
            满载一船星辉,
            在星辉斑斓里放歌。
            但我不能放歌,
            悄悄是别离的笙箫;
            夏虫也为我沉默,
            沉默是今晚的康桥!
            悄悄的我走了,
            正如我悄悄的来;
            我挥一挥衣袖,
            不带走一片云彩。
        </p>
    </div>
    
    </body>
    </html>

    效果:

    2017-08-22  19:59:44

  • 相关阅读:
    JAVA之数组
    Linux之判断字符串是否为空
    Python之操作HBASE数据库
    【转】Linux之crontab定时任务命令
    Python之shutil模块(复制移动文件)
    JAVA之列表集合ArrayList
    Python之多线程多进程
    前端之Javascript
    前端之DOM操作
    【转】写一个简单的爬虫来批量爬取新浪网的新闻
  • 原文地址:https://www.cnblogs.com/guangzhou11/p/7413396.html
Copyright © 2020-2023  润新知