Question

好吧，所以我在Google上搜索了几个小时，以不同的方式对齐这两个对象，但没有任何运气。我希望图片在左侧，文本在右侧。 Align =“”并没有做任何事情。这是HTML中的部分：

 <section class="site-section about-us-section" id="about-us-section">
  <div class="container">

    <div class="row mb-5 pt-0 site-section">
      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>

        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
    </div>

以下是当前情况的图片： Photo

我希望你们能帮助我解决问题。

谢谢。

Answer 1

为此使用Flex-box。 flex-flow:row-reverse属性按相反的顺序放置元素。希望这可以帮助。让我知道是否有任何疑问。

.site-section{
    display: flex;
    flex-wrap: wrap;
    flex-flow: row-reverse;
    align-items: baseline;
}

.align-self-center{
  width:80%;
}

.img-overlap{
  width:20%;
}

<section class="site-section about-us-section" id="about-us-section">
  <div class="container">

    <div class="row mb-5 pt-0 site-section">
      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>

        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
    </div>
  </div>
</section>

Answer 2

使用flex通过设置这2个元素的直接父元素来创建“ 2列”布局。我删除了一些div来简化代码，看起来也像使用div一样。

 <section class="site-section about-us-section" id="about-us-section">

      <div class="col-md-6 align-self-center">
        <h3 class="section-title-sub text-primary">About Us</h3>
        <h2 class="section-title mb-4">More Details On</h2>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p>Soluta quasi cum delectus eum facilis recusandae nesciunt molestias accusantium libero dolores repellat id in dolorem laborum ad modi qui at quas dolorum voluptatem voluptatum repudiandae.</p>
        <p class="mt-4"><a href="#" class="spepcial_link">Read more about us</a></p>
      </div>
      <div class="col-md-5 ml-auto img-overlap">
        <div class="img-1"><img src="images/sq_img_6.png" alt="Image" class="img-fluid img-shadow"></div>
        <div class="img-2"><img src="images/sq_img_10.png" alt="Image" class="img-fluid img-shadow"></div>
      </div>
</section>

#about-us-section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.align-self-center {
    width: 50%;
}

Flexbox非常适合这些情况。检查这支笔-https://codepen.io/orby32/pen/MWYLaap?editors=1100

对齐文字和照片

2 个答案: