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

    css column-fill属性怎么用

    silencementsilencement2019-05-28 09:21:17原创966

    css column-gap属性定义及用法

    在css中,column-gap属性通常和columns、column-count等分列属性一起使用,用来设置元素内容分列(多列布局)后列与列之间的距离

    css column-gap属性语法格式

    css语法:column-gap: length / normal;(例:column-gap:36px;)

    JavaScript语法:object.style.columnGap="40px"

    css column-gap属性值说明

    length:自定义列之间的间距

    normal:列之间的普通差距

    实例

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>css3 column-gap属性设置列之间的距离笔记</title>

    <style type="text/css">

    body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;}

    .gap{column-count:3;column-gap:60px;}

    .gap_normal{column-count:3;column-gap:normal;}

    </style>

    </head>

    <body>

    <div class="gap">column-gap:60px;演示,将列与列之间的距离设置为60px</div>

    <div class="gap_normal">column-gap:normal;演示,将列与列之间的距离设置普通距离!</div>

    </body>

    </html>

    运行结果

    2b320622b1af61ad4727b4fcc33524d.png

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css column-fill属性
    上一篇:css 内阴影怎么做 下一篇:css grid-columns属性怎么用
    大前端线上培训班

    相关文章推荐

    • css text-decoration-line属性怎么用• css padding属性怎么用• css flex-grow属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网