如何为文本组件特定区域上色、添加图标并实现多div并排？

步骤1：重构卡片结构并添加顶部橙色区域 #

原来的代码依赖大量内联样式和负margin调整位置，容易引发布局问题。我们先把每个评论卡片重构为语义化结构，同时实现顶部橙色栏+图标的效果：

<!-- 父容器，用于控制卡片并排 -->
<div class="reviews-container">
  <!-- 评论卡片1 -->
  <div class="review-card">
    <!-- 顶部橙色栏 -->
    <div class="review-header">
      <span class="review-icon">⭐</span>
    </div>
    <!-- 评论内容 -->
    <div class="review-text">
      Awesome product! Works well. Easy to wear, great color scheme, does not tear easily and came home in under two days. Worth every rupee, it really helped me save money from buying the one-time use patches and rubber patches and has been a great experience with the patch.
    </div>
    <!-- 用户信息 -->
    <div class="review-author">
      <h3>Rishan Reddy</h3>
      <p>Indus</p>
    </div>
  </div>

  <!-- 评论卡片2（复制结构修改内容即可） -->
  <div class="review-card">
    <div class="review-header">
      <span class="review-icon">⭐</span>
    </div>
    <div class="review-text">
      Another great product! Fits perfectly, durable material, and fast shipping. Would definitely recommend to friends and family.
    </div>
    <div class="review-author">
      <h3>Jane Doe</h3>
      <p>Delhi</p>
    </div>
  </div>

  <!-- 评论卡片3 -->
  <div class="review-card">
    <div class="review-header">
      <span class="review-icon">⭐</span>
    </div>
    <div class="review-text">
      Best purchase this month! Comfortable, long-lasting, and excellent value for money. No complaints at all, will buy again.
    </div>
    <div class="review-author">
      <h3>John Smith</h3>
      <p>Mumbai</p>
    </div>
  </div>
</div>

步骤2：添加CSS样式实现效果 #

用CSS类替代内联样式，更易维护和复用：

/* 全局字体统一设置 */
body {
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
  padding: 50px;
}

/* 父容器：实现卡片并排 */
.reviews-container {
  display: flex;
  gap: 30px; /* 卡片之间的间距 */
  flex-wrap: wrap; /* 屏幕变小时自动换行 */
}

/* 单个评论卡片 */
.review-card {
  width: 250px;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden; /* 确保顶部栏的圆角和卡片一致 */
  height: auto; /* 自动适应内容高度，避免固定高度的限制 */
}

/* 顶部橙色栏 */
.review-header {
  background-color: #ff7f24; /* 橙色，可按需调整色值 */
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

/* 顶部图标 */
.review-icon {
  font-size: 24px;
  color: white; /* 图标颜色可调整 */
  /* 如果用图片图标，替换为以下代码：
  width: 24px;
  height: 24px;
  background: url('你的图标路径') no-repeat center;
  background-size: contain;
  */
}

/* 评论内容区域 */
.review-text {
  padding: 20px;
  line-height: 1.5;
}

/* 用户信息区域 */
.review-author {
  padding: 0 20px 20px;
}

.review-author h3 {
  margin: 0 0 5px;
  font-size: 18px;
}

.review-author p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

关键修改说明 #

• 结构重构：把零散元素整合到卡片容器内，避免用负margin调整位置，布局更稳定。
• 顶部橙色栏：通过overflow: hidden让卡片圆角包含顶部栏，防止橙色区域溢出。
• 并排布局：用display: flex实现横向排列，gap控制间距，flex-wrap保证小屏幕自动换行。
• 移除固定高度：取消原代码的固定高度，让卡片自动适配内容，更灵活。

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