在CSS中添加行列布局 解决WordPress Calculated Field Forms插件列数限制问题

问题原因 #

你当前代码未生效的核心原因是<style>标签内没有编写任何对应布局的CSS规则：

• div是原生块级元素，默认宽度为100%、每个元素独占一行，因此三个.column元素会自动垂直排列，形成1列3行的效果
• 你引入的外部style.css如果没有对应.row、.column的布局规则，也不会触发多列排版

解决方案 #

使用Flex布局可以快速实现任意列数的等分布局，兼容性也完全满足常规建站需求。

完整可运行的1行3列示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列布局示例</title>
    <style>
        .row {
            /* 开启Flex布局，子元素自动横向排列 */
            display: flex;
            /* 列之间加间隙 */
            gap: 16px;
            /* 可选：列左右两端对齐 */
            justify-content: space-between;
        }
        .column {
            /* 每列自动填充剩余宽度，实现等分布局 */
            flex: 1;
            /* 可选：给列加边框、内边距方便区分 */
            border: 1px solid #eee;
            padding: 12px;
        }
    </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="column">
        Column 1
      </div>
      <div class="column">
        Column 2
      </div>
      <div class="column">
        Column 3
      </div>
    </div>
  </div>
</body>
</html>

1行7列（一周7天）适配方法 #

不需要修改核心CSS规则，直接往.row容器内添加7个.column元素即可，Flex布局会自动平分宽度，也可以针对性加样式优化显示效果：

/* 7列周视图专属样式（可选） */
.row.week-row {
    gap: 8px;
}
.row.week-row .column {
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Calculated Field Forms插件适配操作 #

你在WordPress中使用时不需要写完整的HTML结构，只需要把上述CSS规则添加到以下任意位置即可覆盖插件默认的4列限制：

• WordPress后台「外观」-「自定义」-「额外CSS」输入框
• Calculated Field Forms插件自带的自定义CSS配置项

内容的提问来源于stack exchange，提问作者Nunhappy