图片与文本左右交替布局问题：第三组出现异常边距

尝试实现图片与文本垂直左右交替布局，但第三组图片与文本出现布局异常，疑似有额外CSS外边距（margin）导致，但无法定位问题根源。

相关代码片段 #

CSS 代码 #

.float-left {
  float: right;
}

.next {
  margin: auto 25px;
  overflow: auto;
}

.flex {
  display: flex;
}

HTML 代码 #

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="./v-kart-restaurant-billing-software2.png" width="700" height="200" loading="lazy" />
  <div class="margin-10">
    <p>Simple dashboard for easy use of the pos software</p>
    <p>
      v-kart uses a simple and easy-to-use dashboard so that anyone will be able to use our software easily it has bigger buttons for easy and prolonged use of software
    </p>
  </div>
</div>

<div class="animate__animated animate__backInLeft animate__delay-1s float-left flex" loading="lazy">
  <div class="margin-10">
    <p>inventory for easy use of the billing software</p>
    <p>
      v-kart uses a simple and easy-to-use inventory which let you add new food items easily and edit the price details
    </p>
  </div>
  <img src="./v-kart-restaurant-billing-software-inventory-main.png" width="700" loading="lazy" />
</div>

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="./v-kart-restaurant-billing-software-add-type-of-food.png" width="700" height="200" loading="lazy" />
  <div class="margin-10">
    <p>Easy to add a new type food type to our pos software</p>
    <p>
      our billing software is different from other pos systems because the software is dynamic and whenever a new type of dish has to be added to the software we can easily group them by adding a new type
    </p>
  </div>
</div>

问题根源是第二组元素同时使用了float: right和flex布局——float属性在flex容器中完全无效，反而会干扰正常的flex布局流，导致后续元素出现异常偏移。

具体修复方案：

1. 移除float-left类的float: right属性，改用flex原生的flex-direction实现左右交替。
2. 给需要反向排列的flex容器添加flex-direction: row-reverse类，替代原来的float逻辑。
3. 统一控制每组容器的间距，避免额外margin干扰。

修改后的CSS：

/* 替换原float-left类，用flex反向排列实现左右交替 */
.reverse-flex {
  flex-direction: row-reverse;
}

.next {
  margin: auto 25px;
  overflow: auto;
}

.flex {
  display: flex;
  align-items: center; /* 让内容垂直居中，提升视觉效果 */
  margin: 20px 0; /* 给每组容器添加上下间距 */
}

.margin-10 {
  margin: 0 10px; /* 文本与图片之间的间距 */
}

修改后的HTML：

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="./v-kart-restaurant-billing-software2.png" width="700" height="200" loading="lazy" />
  <div class="margin-10">
    <p>Simple dashboard for easy use of the pos software</p>
    <p>
      v-kart uses a simple and easy-to-use dashboard so that anyone will be able to use our software easily it has bigger buttons for easy and prolonged use of software
    </p>
  </div>
</div>

<div class="animate__animated animate__backInLeft animate__delay-1s reverse-flex flex" loading="lazy">
  <div class="margin-10">
    <p>inventory for easy use of the billing software</p>
    <p>
      v-kart uses a simple and easy-to-use inventory which let you add new food items easily and edit the price details
    </p>
  </div>
  <img src="./v-kart-restaurant-billing-software-inventory-main.png" width="700" loading="lazy" />
</div>

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="./v-kart-restaurant-billing-software-add-type-of-food.png" width="700" height="200" loading="lazy" />
  <div class="margin-10">
    <p>Easy to add a new type food type to our pos software</p>
    <p>
      our billing software is different from other pos systems because the software is dynamic and whenever a new type of dish has to be added to the software we can easily group them by adding a new type
    </p>
  </div>
</div>

额外提醒：检查HTML结构，确保所有标签都正确闭合（示例中第三组div未闭合），这也会影响布局稳定性。

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