css的columns属性在实际开发过程中的应用

平时的表单需求都是从上到下,表单多了就出滚动条。最近有个产品给出一个表单多了就分两列的需求。

需求描述

现有的表单组件展示样式

预期的表单组件展示

antd的表单实现

直接在form上增加 columns: 2

非antd实现不起作用原因

我在自己实现的表单form上使用了display: flex

解决方案

将顶级标签设置为display: block或者display: inline-block或者display: flow(实验性属性)或者display: table-cell或者display: table-caption 或者 display: list-item

相关推荐
牛蛙点点申请出战15 小时前
IconFontViewer -- 一个可以在 Android Studio 中实时预览 IconFont 的插件
android·前端·intellij idea
是上好佳佳佳呀16 小时前
【前端(十三)】JavaScript 数组与字符串笔记
前端·javascript·笔记
巴沟旮旯儿16 小时前
vite项目配置文件和打包
前端·设计模式
彩票管理中心秘书长16 小时前
Pinia 插件架构与组合式函数:如何让你的 Store 长出“超能力”
前端
彩票管理中心秘书长16 小时前
Pinia 比 Vuex 强在哪?我用同一个模块写了两种实现,你自己看
前端
yingyima16 小时前
用 Cron 加 Webhook 打通自动化工作的任督二脉
前端
JackieDYH16 小时前
CSS Flexbox 与 Grid 的默认行为-布局的底层机制
前端·css·html
彩票管理中心秘书长16 小时前
E2E测试入门:别让用户帮你点鼠标了,找个机器人替你打工吧
前端
菜蒙爱学习16 小时前
【Markdown】可用的所有 HTML 标准颜色
前端·html
小宋的踩坑日记16 小时前
全网最全!Tailwind/Unocss 类名速查表,前端开发必备神器!
css·小程序·前端框架