首次开发HTML/CSS项目，如何正确设置带图片的评价容器样式

问题核心原因 #

你当前给.c-review设置了flex-direction: column，导致头像、评价内容、用户名、星级全部垂直堆叠，和目标效果中「头像左置、内容居右水平排列」的布局不符。

修改方案 #

第一步：调整HTML结构，把右侧内容包裹为独立容器 #

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" >
<div class="container-review">
  <div class="c-review">
    <img src="./eduford_img/user1.jpg" alt="Christine" />
    <!-- 新增内容容器 -->
    <div class="review-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quibusdam vero harum. Libero dolore quisquam expedita quas consequuntur adipisci dolor.
      </p>
      <h4>Christine Berkley</h4>
      <div class="star-group">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="far fa-star"></i>
      </div>
    </div>
  </div>
  <div class="c-review">
    <img src="./eduford_img/user2.jpg" alt="David" />
    <!-- 新增内容容器 -->
    <div class="review-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quibusdam vero harum. Libero dolore quisquam expedita quas consequuntur adipisci dolor.
      </p>
      <h4>David Byer</h4>
      <div class="star-group">
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
      </div>
    </div>
  </div>
</div>

第二步：调整CSS样式 #

.container-review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; /* 100px间隙过大，可根据视觉效果调整 */
  margin-inline: 5%;
  margin-bottom: 100px;
}

.c-review {
  background: var(--primary-300);
  border-radius: var(--borderRadius);
  display: flex;
  flex-direction: row; /* 从垂直排列改为水平排列 */
  align-items: flex-start; /* 头像顶部对齐，避免被拉伸 */
  padding: 1.5rem; /* 增加容器内边距，避免内容贴边 */
  gap: 1rem; /* 头像和内容之间的间距 */
}

.c-review img {
  width: 48px; /* 固定头像尺寸，不要用百分比避免随容器缩放变形 */
  height: 48px;
  border-radius: 50%; /* 裁剪为圆形头像，符合目标效果 */
  object-fit: cover; /* 避免头像拉伸变形 */
}

.star-group {
  margin-top: 0.5rem;
}
.star-group i {
  color: #f59e0b; /* 星星设置为金色，可自定义 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .container-review {
    grid-template-columns: 1fr;
  }
}

关键改动说明 #

• 将评价容器的flex布局从垂直排列改为水平排列，实现头像和内容左右分布
• 新增内容容器包裹所有文字、星级元素，避免布局散乱
• 固定头像尺寸并设置圆形裁剪，符合常规评价卡片的设计规范
• 新增星星容器统一样式控制，后续修改更方便
• 增加响应式适配，小屏幕下自动改为单列布局

其他优化建议 #

• 语义化优化：可将.c-review替换为<article>标签，星级区域增加aria-label="评分4星"属性提升无障碍访问体验
• 样式复用：可将星星颜色、头像尺寸定义为CSS变量，后续统一修改更高效
• 内容溢出处理：给p标签增加line-height属性优化阅读体验，长文本可根据需求设置最大行数截断

内容的提问来源于stack exchange，提问作者ḞLØҜȈ