请求开发带垂直分隔线的水平产品卡片（HTML+CSS）

以下是基于Flexbox实现的水平产品卡片，完美解决垂直对齐和分隔线高度问题：

HTML 结构 #

<div class="product-card">
  <div class="card-image">
    <img src="产品图片路径" alt="产品展示图">
  </div>
  <div class="vertical-separator"></div>
  <div class="card-text">
    <div class="text-block">
      <h3>产品名称</h3>
      <p>产品核心卖点简短描述，清晰传递价值</p>
    </div>
    <div class="text-block">
      <p>补充信息区域，可放置规格、使用场景或售后说明</p>
    </div>
  </div>
</div>

CSS 样式 #

/* 卡片容器核心样式 */
.product-card {
  display: flex;
  align-items: center; /* 关键：让所有子元素垂直居中 */
  width: 650px;
  height: 220px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
  box-sizing: border-box;
}

/* 图片区域 */
.card-image img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

/* 垂直分隔线 */
.vertical-separator {
  width: 1px;
  height: 80%; /* 占卡片高度的80% */
  background-color: #e5e7eb;
  margin: 0 28px;
}

/* 文本内容容器 */
.card-text {
  flex: 1; /* 占据卡片剩余宽度 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 两个文本块的间距 */
}

/* 文本块样式 */
.text-block h3 {
  margin: 0 0 8px 0;
  font-size: 1.3rem;
  color: #1f2937;
}

.text-block p {
  margin: 0;
  line-height: 1.6;
  color: #6b7280;
}

关键说明 #

• 卡片容器通过 display: flex + align-items: center 实现内部元素的垂直居中，这是解决对齐问题的核心
• 垂直分隔线设置 height: 80%，依托父容器的垂直居中特性，自动保持在卡片垂直方向的中间位置，高度为卡片的80%
• 文本区域使用 flex:1 自动填充剩余空间，内部用垂直flex布局排列两个文本块，保证排版整洁

内容的提问来源于stack exchange，提问作者dom.atom