使用 css/bootstrap 将图像定位到内容的右侧

Question

我正在尝试将图像放置在内容区域的右侧，如此运球镜头所示。

https://dribbble.com/shots/15571736-Money-Transfer-Website

这是我目前所拥有的。

https://codepen.io/pinapelkod/pen/RwLJJNm

.content {
  position: relative;
}
.bg-image {
  position: relative;
  top: 350px;
  left: 450px;
  height: 350px;
  z-index: 2;
}

当我使用 top 和 left 属性浮动图像或位置时，布局会失真。

Answer 1

通过更新bg-image 类样式，我得到了以下结果。如果有不同的问题，请更清楚地说明。

body {
  background-color: white;
  color: #1d2331;
}

.bg-image {
  float: right !important;
  width: 100%;
  position: relative;
  height: auto;
  margin-right: -40% !important;
}

a.nav-link,
a.navbar-brand {
  color: #1d2331;
}

a i {
  color: #c9327b;
}

form .btn {
  background-color: #1d2331;
  color: #f3f1fe;
}

.action-call {
  min-height: 35vh;
}

.feature {
  background-color: #f3f1fe;
  min-height: 56vh;
}

.feature .icon-link {
  text-decoration: none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header>
  <nav class="navbar navbar-expand-md mt-4">
    <div class="container-fluid mx-5">
      <a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
      <div class="vr ms-0"></div>
      <div class="dropdown">
        <button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
          aria-expanded="false"><strong>Personal</strong></button>
      </div>
      <ul class="navbar-nav ms-auto">
        <li class="nav-item me-4">
          <a class="nav-link" href="#"><strong>Download</strong></a>
        </li>
        <li class="nav-item  me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
        <li class="nav-item  me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
        </li>
      </ul>
      <form class="ms-5">
        <button class="btn btn-outline-success px-5" type="submit">Login</button>
      </form>
    </div>
  </nav>
</header>
<article class="content">
  <img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
  <section class="mx-5 action-call d-flex align-items-center ">
    <div class="container-fluid">
      <div class="row t-row">
        <h1> <strong>Send money <br>abroad more faster</strong></h1>
        <div class="sendnow"></div>
      </div>
    </div>
  </section>
  <section class="feature d-flex align-items-center">
    <div class="container-fluid">
      <div class="mx-5 row b-row">
        <div class="d-flex justify-content-start">
          <div class="col-3 me-3">
            <i class="fs-2 bi bi-shield-shaded"></i>
            <h5> <strong>Safety guarantee</strong></h5>
            <p>We make sure your money will <br>be safe 100% guarantee</p>
            <a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
            </a>
          </div>
          <div class="col-3 me-3">
            <i class="fs-2 bi bi-credit-card-2-front-fill"></i>
            <h5> <strong>Send money in minutes</strong></h5>
            <p>Your money will be sent faster <br>than your blue wallet</p>
            <a href="#" class="icon-link"> <strong>Send money now</strong><i
                class="bi bi-chevron-right text-primary"></i> </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</article>

Answer 2

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div> 

Answer 3

我重组了 html 并添加了一个引导显示 (d-flex) 类，如下所示。

更新 HTML 结构：

<div class="d-flex mt-5">
          <div class="col-3 ">
           .....
          </div>
          <div class="col-3">
           .....
          </div>
          <div class="col-6 content">
            <img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
          </div>
</div>

对应的CSS：

.content {
  position: relative;
}

.bg-image {
  position: relative;
  top: -310px;
  left: 160px;
  height: 500px;
}

codepen 的链接： https://codepen.io/pinapelkod/pen/RwLJJNm