同时左右排列图像和文本

Question

我正在尝试左右垂直加载图像和引号，但我对第三个图像和引号有问题。从某个地方添加了 margin css，但我无法找到问题。我已经给出了工作模型来理解我的问题，请检查！

工作网站

.float-left {
  float: right;
}

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

.flex {
  display: flex;
}

<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>

Answer 1

我建议与display:flexand合作flex-flow。

这还允许为所有部分保留相同的 HTML 结构，这对于响应式可能很有用。

.flex {
  display: flex;
}

.flex--left {
  flex-flow: row-reverse;
}

.content,
.image {
  width: 50%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="https://serene-cascaron-252692.netlify.app/v-kart-restaurant-billing-software2.png" width="700" height="200" loading="lazy" class="image" />
  <div class="margin-10 content">
    <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 flex flex--left" loading="lazy">
  <img src="https://serene-cascaron-252692.netlify.app/v-kart-restaurant-billing-software-inventory-main.png" width="700" loading="lazy" class="image" />
  <div class="margin-10 content">
    <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>
</div>

<div class="animate__animated animate__backInRight animate__delay-1s flex" loading="lazy">
  <img src="https://serene-cascaron-252692.netlify.app/v-kart-restaurant-billing-software-add-type-of-food.png" width="700" height="200" loading="lazy" class="image" />
  <div class="margin-10 content">
    <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>

<div class="animate__animated animate__backInRight animate__delay-1s flex flex--left" loading="lazy">
  <img src="https://serene-cascaron-252692.netlify.app/v-kart-restaurant-billing-software-loginpage.png" width="700" height="200" loading="lazy" class="image" />
  <div class="margin-10 content">
    <p>v-kart has high security features</p>
    <p>
      restaurant billing includes multiple billing users so we created the best security features for your software so the owner gets daily profit and loss correctly
    </p>
  </div>