如何在文本在左侧时在右侧添加图像。使用 div

Question

基本上，我提供了一个从 bootsrap 获得的 div 代码，我想在 div 中添加图像，但无论我按高度和宽度更改图像大小多少次，它似乎都不适合。< /p>

正如您在下面的屏幕截图中看到的，图像从 div 的边框上掉下来。我希望它包含整齐。所以文字在左边，图片在左边。

我试了很多次都失败了。请有人帮助我，我是 uni 学生并试图独自解决所有这些问题，但我花了很多时间试图修复它并且在 6 天内到期！！

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
  <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
    <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
      <h1 class="display-4 fw-bold lh-1">Welcome to the Neurodiverse Page!</h1>
      <p class="fs-5 mb-4">Here you will find many information to help be successful in a career in Ai or if your like many of just like learning more about Ai well this place is for you!</p>
      <p class="fs-5 mb-4">This website has been designed to have less clicks! meaning you can scroll through the information you need!</p>
      <p class="fs-5 mb-4">Dont forget to sign up which is at the bottom of this page!</p>
    </div>
  </div>
  <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
    <img class="d-block rounded-lg-3" src="bootstrap-docs.png" alt="">
  </div>
</div>
<div id="my_box">
  <div>
    <img src="https://miro.medium.com/max/1750/1*uQdZlvHn4rb4boX0_VBIVw.jpeg" width="895px" class="img-fluid.img-fluid. max-width: 100%; and height: auto;   alt=" "></div>
</div>
    </div>

Answer 1

每个列 div 都需要在行 div 中才能得到您想要的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-5">
    <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
        <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
            <h1 class="display-4 fw-bold lh-1">Welcome to the Neurodiverse Page!</h1>
            <p class="fs-5 mb-4">Here you will find many information to help be successful in a career in Ai or if your like many of just like learning more about Ai well this place is for you!</p>
            <p class="fs-5 mb-4">This website has been designed to have less clicks! meaning you can scroll through the information you need!</p>
            <p class="fs-5 mb-4">Dont forget to sign up which is at the bottom of this page!</p>
        </div>
        <div class="col-lg-4 offset-lg-1 p-0 position-relative overflow-hidden shadow-lg">
            <img src="https://miro.medium.com/max/1750/1*uQdZlvHn4rb4boX0_VBIVw.jpeg" class="img-fluid" alt="">
        </div>
    </div>
</div>