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/

你可能感兴趣的文章

NMF(非负矩阵分解)

nmon_x86_64_centos7工具如何使用

NN&DL4.1 Deep L-layer neural network简介

NN&DL4.3 Getting your matrix dimensions right

NN&DL4.7 Parameters vs Hyperparameters

NN&DL4.8 What does this have to do with the brain?

nnU-Net 终极指南

No 'Access-Control-Allow-Origin' header is present on the requested resource.

NO 157 去掉禅道访问地址中的zentao

no available service ‘default‘ found, please make sure registry config corre seata

No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

no connection could be made because the target machine actively refused it.问题解决

No Datastore Session bound to thread, and configuration does not allow creation of non-transactional

No fallbackFactory instance of type class com.ruoyi---SpringCloud Alibaba_若依微服务框架改造---工作笔记005

No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-loadbalanc

No mapping found for HTTP request with URI [/...] in DispatcherServlet with name ...的解决方法

No mapping found for HTTP request with URI [/logout.do] in DispatcherServlet with name 'springmvc'

No module named 'crispy_forms'等使用pycharm开发

No module named cv2

No module named tensorboard.main在安装tensorboardX的时候遇到的问题