图文卡片布局

图文卡片布局（产品展示型）

一、HTML结构

html

<div class="card">                      <!-- 卡片容器 -->
  <div class="card-img">                <!-- 图片区 -->
    <img src="./img/product.jpg" alt="产品图" />
  </div>
  <div class="card-info">               <!-- 信息区 -->
    <h3><a href="#">无线蓝牙耳机</a></h3>  <!-- 产品名 -->
    <p class="desc">                    <!-- 产品描述 -->
      HiFi音质，主动降噪，续航30小时...
    </p>
    <div class="card-footer">           <!-- 底部操作区 -->
      <span class="price">¥299</span>
      <a href="#" class="btn">立即购买</a>
    </div>
  </div>
</div>

二、层级关系

text

.card
├── .card-img → img（产品图）
└── .card-info
    ├── h3 → a（产品名链接）
    ├── .desc（产品描述）
    └── .card-footer
        ├── .price（价格）
        └── a.btn（购买按钮）

三、各部分功能

类名	作用
.card	卡片外层容器
.card-img	放置产品图片
.card-info	右侧信息区域
h3 → a	产品名称，可点击跳转
.desc	产品简要描述
.card-footer	底部操作区（价格+按钮）
.price	价格展示
.btn	操作按钮

四、常用布局方式

Flex横向排列 + 垂直居中

css

.card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.card-img {
  flex: 0 0 35%;        /* 图片占35%，不伸缩 */
}
.card-info {
  flex: 1;              /* 文字区占剩余空间 */
}

Grid网格布局

css

.card {
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
  gap: 20px;
}

五、关键CSS属性速查

属性	作用
display: flex	弹性布局，图文横向排列
flex: 0 0 百分比	固定宽度不伸缩
gap	图文之间的间距
align-items: center	垂直居中对齐
border-radius	卡片圆角
box-shadow	卡片阴影，增加层次感
padding	卡片内边距
object-fit: cover	图片自适应裁剪不变形

六、完整CSS示例

css

.card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.card-img img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
h3 a {
  text-decoration: none;
  color: #333;
}
.desc {
  color: #666;
  line-height: 1.6;
}
.price {
  color: #e4393c;
  font-weight: bold;
  font-size: 18px;
}
.btn {
  padding: 6px 16px;
  background: #007aff;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
}