如何实现产品卡片中图片左、文本右的并排布局？

优先推荐Flex布局（最稳定易维护） #

Flex是当前前端布局的主流方案，能轻松解决并排问题，避免float的各种坑。以下是完整可运行的代码示例，对应你的产品卡片场景：

HTML结构

<div class="product-card">
  <!-- 背景图容器 -->
  <div class="card-image"></div>
  <!-- 文本内容容器 -->
  <div class="card-content">
    <p class="category">PERFUME</p>
    <h1 class="title">Gabrielle Essence Eau De Parfum</h1>
    <p class="description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
    <div class="price">
      <span class="current-price">$149.99</span>
      <span class="original-price">$169.99</span>
    </div>
    <button class="add-btn">Add to Cart</button>
  </div>
</div>

CSS代码

/* 基础重置，避免默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2ebe3;
  font-family: 'Montserrat', sans-serif;
}

/* 核心：父容器设置flex，让子元素并排 */
.product-card {
  display: flex;
  width: 600px; /* 卡片总宽度，可根据需求调整 */
  background-color: white;
  border-radius: 10px;
  overflow: hidden; /* 防止子元素溢出圆角 */
}

/* 背景图容器 */
.card-image {
  flex: 1; /* 和内容容器平分宽度 */
  background-image: url('你的图片路径'); /* 替换成你的背景图URL */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中显示 */
}

/* 文本内容容器 */
.card-content {
  flex: 1; /* 和图片容器平分宽度 */
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让内容上下分布均匀 */
}

/* 以下是文本样式，按需调整 */
.category {
  letter-spacing: 5px;
  color: #6c7289;
  font-size: 12px;
  font-weight: 500;
}

.title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  line-height: 1;
  color: #1c232b;
  margin: 20px 0;
}

.description {
  color: #6c7289;
  font-size: 14px;
  line-height: 1.6;
}

.price {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.current-price {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  color: #3c8067;
}

.original-price {
  color: #6c7289;
  text-decoration: line-through;
  font-size: 14px;
}

.add-btn {
  background-color: #3c8067;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #1a4032;
}

关键注意点（解决你遇到的异常） #

1. 父容器必须设display: flex：这是子元素并排的核心，之前可能漏了这一步
2. 背景图容器要设置宽高/比例：用flex:1分配宽度，配合background-size: cover确保背景图显示，避免宽度为0的问题
3. box-sizing: border-box：让padding不会撑开元素宽度，保证布局准确
4. 父容器加overflow: hidden：防止子元素溢出卡片圆角，同时避免float布局时的父容器塌陷问题

如果你一定要用Float布局（需处理浮动清除） #

float布局容易出现父容器塌陷、元素溢出等问题，需要额外处理：

.product-card {
  width: 600px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden; /* 解决父容器塌陷 */
}

.card-image {
  float: left;
  width: 50%;
  height: 450px; /* 固定高度，或用padding-top: 75%实现响应式比例 */
  background-image: url('你的图片路径');
  background-size: cover;
  background-position: center;
}

.card-content {
  float: right;
  width: 50%;
  padding: 30px;
}

/* 清除浮动，兼容更多场景 */
.product-card::after {
  content: "";
  display: table;
  clear: both;
}

但还是强烈推荐用Flex布局，代码更简洁，维护成本更低，响应式适配也更方便。

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