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;
        }
相关推荐
爱吃的强哥8 分钟前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
谈不譚网安17 分钟前
CSRF请求伪造
前端·网络安全·csrf
TT模板22 分钟前
苹果cmsV10主题 MXonePro二开优化修复开源版
前端·html5
拖孩23 分钟前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
去伪存真29 分钟前
不用动脑,手把手跟着我做,就能掌握Gitlab+Jenkins提交代码自动构部署
前端·jenkins
天天扭码1 小时前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
小希爸爸1 小时前
4、中医基础入门和养生
前端·后端
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
uhakadotcom2 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端
鬼面瓷2 小时前
CAPL编程_03
前端·数据库·笔记