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;
        }
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端