如何在右边添加图片，而文字在左边。使用div

Question

基本上，我给出了一个div代码，它是我从bootsrap得到的，我试图在div中添加图像，但它似乎不太适合，无论我多少次根据高度和宽度更改图像大小。

正如你在下面的截图中看到的，图片从div的边框上掉了下来。我希望它被整洁地包含起来。因此文本将在左侧，图像将在左侧。

我试过很多次，但都失败了。请来人帮帮我，我是一名大学生，正试图独自解决这一切，但这花费了我大量的时间来修复它，而且它应该在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>

​