我希望我的文字環繞我的圖像。現在我正在使用Bootstrap 5網格系統。但這并沒有給我想要的結果。我試著在圖像上使用“float: right ”,但是不起作用。

文本應該真正環繞被拉到右邊的圖像。

你將如何實現這一目標？

我的代碼:

<section id="about" class="about">
      <div class="container">

        <div class="row">
          <div class="col-lg-7 pt-4 pt-lg-0">
            <h3>Over mij</h3>
            <br />
            <p>
              ... text ...
            </p>
          </div>
        
          <div style="text-align: left;" class="col-lg-5">
            <img src="assets/img/fotokristin.jpg" class="img-fluid imgshadow" alt="">
          </div>

        </div>

      </div>
    </section>
    <!-- End About Section -->

圖像需要是相同的。col作為文本，在& ltp & gt并使用。浮點型

<link  rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<section id="about" class="about">
  <div class="container">

    <div class="row">
      <div class="col-lg-7 pt-4 pt-lg-0">
        <h3>Over mij</h3>
        <br />
        <img src="https://via.placeholder.com/100" class="float-end imgshadow" alt="">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

      <div style="text-align: left;" class="col-lg-5">

      </div>

    </div>

  </div>
</section>

嘗試浮動端或其任何變種:https://getbootstrap.com/docs/5.1/utilities/float/記得要避免使用d-flex或d-grid，他們會給你意想不到的結果超過BS默認值。

記得給你的圖片添加額外的選項，讓它看起來更好，比如m-3讓所有的邊都留有空白。也可以用& lt圖& gt。

示例代碼:

<p>Text.</p>

<figure class="figure w-50 float-end m-3">
    <img src="photo.jpg" class="figure-img img-fluid rounded img-thumbnail" alt="Alt text.">
    <figcaption class="figure-caption text-center">Visible text.</figcaption>
</figure>

<p>Text.</p>

結果:

為了以防萬一，我的圖像包含在這里(這些只是開始標記，所以您可以看到相關的類):

<main class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">