css_23_多列布局

  • 常用值:
    column-count:指定列数,值是数字。

column-width:指定列宽,值是长度。

columns :同时指定列宽和列数,复合属性;值没有数量和顺序要求。

column-gap:设置列边距,值是长度。

column-rule-style:设置列与列之间边框的风格,值与 border-style 一致。

column-rule-width:设置列与列之间边框的宽度,值是长度。

column-rule-color ::设置列与列之间边框的颜色。

coumn-rule :设置列边框,复合属性。

column-span: 指定是否跨列;

值: none 、all。

举例:

css 复制代码
 .outer {
            width: 1000px;
            margin: 0 auto;

            /* 直接指定列数 */
            column-count: 5;

            /* 指定每一列的宽度,会自动计算列数 */
            column-width:220px ;

            /* 复合属性,能同时指定列宽和列数 */
            columns: 4;

            /* 调整列间距 */
            column-gap: 20px;

            /* 每一列的边框宽度 */
            column-rule-width: 2px;

            /* 每一列的边框风格 */
            column-rule-style: dashed;

            /* 每一列的边框颜色 */
            column-rule-color: red;

            /* 边框相关的复合属性 */
            column-rule: 2px dashed red;
        }
相关推荐
GIS程序媛—椰子42 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt