如何为包含三列的行添加外边框与列间分隔线，实现页面区分？

以下是调整后的代码，实现了三列白色外边框、列间分隔线，同时修正了原代码中的无效语法问题：

修改后的CSS #

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  gap: 2px; /* 控制列之间的白色分隔线宽度 */
  margin: 0 2px; /* 保证最外侧列的边框与页面边缘有间距 */
}

.column {
  flex: 1; /* 三列自动等分宽度 */
  padding: 10px;
  height: auto; /* 自适应内容高度 */
  background-color: #1476D9;
  color: #ffffff;
  border: 2px solid white; /* 白色外边框 */
}

/* 如果你想给段落添加白色边框，可保留以下样式（需配合HTML类名使用） */
p.solid {
  border-style: solid;
  border-radius: 15px;
  border-width: 10px;
  border-color: white;
}

修改后的HTML #

<div class="row">
  <div class="column">
    <h2>title</h2>
    <p>text</p>
    <!-- 若要给段落加白色边框，改为：<p class="solid">text</p> -->
  </div>
  <div class="column">
    <h2>title</h2>
    <p>text</p>
  </div>
  <div class="column">
    <h2>title</h2>
    <p>text</p>
  </div>
</div>

关键调整说明 #

• 替换Float为Flex布局：避免浮动导致的父元素塌陷问题，同时更便捷地实现列等分和间距控制
• 白色外边框：通过.column的border属性直接设置，样式统一且易维护
• 列间分隔线：利用Flex布局的gap属性实现，无需额外添加分隔元素，简洁高效
• 修正无效语法：移除HTML中重复的style属性（单个元素仅允许一个style属性），将height: reflexive改为有效的height: auto
• 关于你尝试的p.solid：只需将类名添加到目标<p>标签上，样式放在CSS样式表中即可生效

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