如何实现WooCommerce产品页Font Awesome图标与标题文本的分组并排布局

你现有代码的核心问题有两点：一是没有对每组「图标+对应标题、文本」做分组包裹，二是把flex布局应用在了最外层容器上，导致所有子元素全部水平排成一行。按以下调整即可实现预期效果：

调整后HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="propertydescription_wrapper">
  <!-- 每组内容用独立容器包裹 -->
  <div class="property__item">
    <div class="icon">
      <i class="fas fa-search-location fa-3x"></i>
    </div>
    <div class="text">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </div>
  </div>

  <div class="property__item">
    <div class="icon">
      <i class="fas fa-search-location fa-3x"></i>
    </div>
    <div class="text">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </div>
  </div>
</div>

调整后CSS代码 #

.propertydescription_wrapper {
  /* 可根据需求设置最大宽度、边距等 */
  max-width: 750px;
  margin: 20px auto;
}

.propertydescription_wrapper * {
  margin: 0;
  box-sizing: border-box;
}

/* 每组内容用flex实现左图标右文本布局 */
.property__item {
  display: flex;
  align-items: flex-start;
  /* 组与组之间的竖向间距，可按需调整 */
  margin-bottom: 35px;
}

.propertydescription_wrapper .icon {
  color: #A7784A;
  /* 避免图标被文本挤压缩小 */
  flex-shrink: 0;
}

.propertydescription_wrapper .text {
  padding-top: 5px;
  padding-left: 20px;
}

.propertydescription_wrapper .text h3 {
  padding-bottom: 10px;
}

主要修改说明 #

• 新增property__item容器包裹每组独立的图标+文本内容，确保每组为独立布局单元，各组自动竖向堆叠
• 修复了原HTML中p标签的闭合错误（原代码误写为<p/>）
• 给每组的图标新增flex-shrink:0属性，避免文本过长时图标被挤压变形
• 新增组间间距，排版更美观，可根据需求调整数值

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