HTML-CSS（五十一）column分栏布局-白红宇

HTML-CSS（五十一）column分栏布局

阅读量：755 次

发布时间：2019-03-23

本文共 957 字，大约阅读时间需要 3 分钟。

:host在使用现代CSS布局方式时，列式布局（Flexbox）是处理复杂布局的首选工具。但在某些场景下，利用CSS新增的column-count、column-width等属性更为合适。这些属性适用于将内容分成多个分栏的布局，常见于报表、表格或需要对齐的布局场景。

CSS列式布局属性解析

column-count: number;

用于设置分栏的个数，需与column-width配合使用。

例如：column-count: 3;将内容分成3列。

column-width: number px;

设置各分栏的宽度，如果不设置，浏览器会根据可用空间均分宽度。

注意：column-width与column-count结合使用时，需考虑数据的对齐方式。

column-gap: number px;

设置分栏之间的间距（空隙），可用于调整分栏之间的空白。

例如：column-gap: 20px;增加每两列之间的空隙。

column-rule: (width: number px / color / style) property;

定义分栏之间的边线，支持类似border的设置。

例如：column-rule: 2px dashed #00FFFF;为分栏之间添加一条虚线。

column-span: all/默认不写;

设置分栏的占位方式，默认为all，每个分栏占据独立行。

若需要某单元格占据多个分栏，可以设置column-span: all。

注意事项

当设置column-count及column-width时，应根据具体需求选择其中一边定义。

如果需要所有列占据单独行，可以将column-span设置为all。

示例应用

以下样式定义可实现一个3列的美食omer列表：

此方法特别适用于需要内容分栏对齐或固定宽度的场景，结合Flexbox时更高效。

在实际应用中，还需根据排版需求调整column-gap及column-rule，确保视觉效果符合预期。

转载地址：http://jdizk.baihongyu.com/

你可能感兴趣的文章

Mysql学习总结（68）——MYSQL统计每天、每周、每月、每年数据 SQL 总结

Mysql学习总结（69）——Mysql EXPLAIN 命令使用总结

Mysql学习总结（6）——MySql之ALTER命令用法详细解读

Mysql学习总结（70）——MySQL 优化实施方案

Mysql学习总结（71）——MySQL 重复记录查询与删除总结

Mysql学习总结（73）——MySQL 查询A表存在B表不存在的数据SQL总结

Mysql学习总结（77）——温故Mysql数据库开发核心原则与规范

Mysql学习总结（78）——MySQL各版本差异整理

Mysql学习总结（79）——MySQL常用函数总结

Mysql学习总结（7）——MySql索引原理与使用大全

Mysql学习总结（80）——统计数据库的总记录数和库中各个表的数据量

Mysql学习总结（81）——为什么MySQL不推荐使用uuid或者雪花id作为主键？

Mysql学习总结（82）——MySQL逻辑删除与数据库唯一性约束如何解决？

Mysql学习总结（83）——常用的几种分布式锁：ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结

Mysql学习总结（84）—— Mysql的主从复制延迟问题总结

Mysql学习总结（85）——开发人员最应该明白的数据库设计原则

MySQL学习笔记十七：复制特性

mysql安装卡在最后一步解决方案（附带万能安装方案）

mysql安装和启动命令小结

MySQL安装配置教程(非常详细)，从零基础入门到精通，看完这一篇就够了