如何通过CSS实现高度随列文本量自适应的双列布局分隔线

效果说明 #

• 基础形态：两列内容中间设置双层分隔线，底层为浅灰色、顶层为白色，形成错落视觉层次
• 自适应要求：分隔线高度无需写死固定值，自动匹配左右两列中内容更高的一列，随内容增减自动拉伸适配
  
  

实现代码 #

直接使用原生CSS Flex布局即可实现，无需额外JavaScript逻辑：

HTML结构 #

<div class="two-column-container">
  <!-- 左侧内容列 -->
  <div class="content-col">
    <p>左侧内容区域，可放置任意长度的文本、模块内容</p>
  </div>
  <!-- 双层分隔线组件 -->
  <div class="divider-container">
    <div class="divider-base"></div>
    <div class="divider-top"></div>
  </div>
  <!-- 右侧内容列 -->
  <div class="content-col">
    <p>右侧内容区域，当任意一侧内容高度变化时，中间分隔线都会自动跟随最高的列调整高度，不会出现高度不足、错位的问题</p>
  </div>
</div>

CSS样式 #

/* 外层容器开启Flex布局，子元素默认等高 */
.two-column-container {
  display: flex;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
}

/* 内容列基础样式 */
.content-col {
  flex: 1; /* 两列均分容器宽度 */
  line-height: 1.6;
}

/* 分隔线容器，Flex子元素默认stretch特性自动撑满容器高度 */
.divider-container {
  position: relative;
  width: 3px;
}

/* 浅色底层分隔线，铺满整列高度 */
.divider-base {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: #e8e8e8;
}

/* 白色顶层分隔线，上下留边露出底层浅灰色 */
.divider-top {
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 20px;
  transform: translateX(-50%);
  width: 1px;
  background: #fff;
}

实现原理 #

核心利用Flex布局的原生特性：Flex容器的子元素默认align-items属性值为stretch，所有子元素会自动拉伸到和容器内最高子项一致的高度。分隔线容器作为Flex子项会自动和左右内容列保持等高，内部两层分隔线通过绝对定位铺满对应高度即可，完全不需要手动设置固定高度，也不需要通过JS动态计算高度。

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