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;
        }
相关推荐
sen_shan1 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君1 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
吃没吃2 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam2 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2762 小时前
Android Retrofit用法详解
前端
鸭梨大大大2 小时前
Spring Web MVC入门
前端·spring·mvc
吃没吃2 小时前
vue2.6-源码学习-Vue 初始化流程分析 (src/core/instance/init.js)
前端
XH2762 小时前
Android Room用法详解
前端
木木黄木木3 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
郁大锤3 小时前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi