• 技术文章 >web前端 >css教程

    css column-width属性怎么用

    silencementsilencement2019-05-28 13:28:26原创1329

    css column-width属性定义及用法

    在css中,column-width属性是用来设置多列布局中列的宽度。column-width属性和其它一些多列布局属性不一样,它可以单独使用。元素只要定义了column-width属性,元素就会形成多列布局,形成的列数取决于column-width属性值。

    css column-width属性语法格式

    css语法:column-width: auto / length;(例:column-width:100px;)

    JavaScript语法:object.style.columnWidth="100px"

    column-width属性值说明

    auto :列的宽度由其它因素决定

    length:自定义列的宽度(如:100px;)

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>css3多列布局之column-width属性设置列的宽度</title>
    <style type="text/css">
    body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;column-rule-style:solid;}
    .a{column-width:80px;}  .b{column-width:100px;}  .c{column-width:180px;}
    </style>
    </head>
    <body>
    <div class="a">column-width:80px;演示:列宽设置为80px。这是为了演示效果多写的</div>
    <div class="b">column-width:100px;演示:列宽设置为100px。这是为了演示效果多写的</div>
    <div class="c">column-width:180px;演示:列宽设置为180p。这是为了演示效果多写的</div>
    </body>
    </html>

    运行结果

    c56111a7e697be3d6f464057e26ed49.png

    以上就是css column-width属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css column-width属性
    上一篇:css是什么缩写 下一篇:css边框线怎么清除
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css outline-color属性怎么用• 左浮动 css怎么写• css怎么设置横向导航
    1/1

    PHP中文网