Question

我需要让我的形象贴在我的DIV底部。我已经阅读了相同问题的帖子已被回答here但是当我尝试它时，整个布局都会中断。有任何想法吗？

这就是我的网站应该是什么样子（看一下手以及它如何触及DIV的底部）here。当我调整窗口大小时，手开始从DIV的底部分离，你可以看到它here

＆＃13;

.right-bg {
  background-color: #fff;
  background: url(../images/right-bg.png) no-repeat right top;
  min-height: calc(100vh - 60px);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.que-es-vpay-content {
  display: inline-block;
  margin-top: 10%;
}

.que-es-vpay-image {
  float: right;
  margin-top: 5%;
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>

  <!-- MY HTML -->
  <div class="row">
    <div class="col-lg-12 right-bg">
      <div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-content">
        <h1 class="section-title">¿Qué es Vpay?</h1>
        <p class="section-p">Vpay es una plataforma de pago y transferencia digital de fácil uso donde puedes realizar transferencias rápidas y seguras.
        </p>
        <div class="col-lg-12 d-flex justify-content-center">
          <a href="#" class="section-btn">¿Cómo funciona?</a>
        </div>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-image">
        <img src="https://4.imimg.com/data4/BB/RH/MY-15241145/multimedia-mobile-phone-500x500.jpg" alt="Aplicación Vpay">
      </div>
    </div>
  </div>
  <!-- /MY HTML -->
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>

</html>

＆＃13;

Answer 1

我无法复制问题，因为没有足够的代码来执行此操作。

在你的情况下，我要做的是“让图像粘在div的底部”是这样的：

HTML

<div class="col-lg-6 col-md-6 col-sm-12 que-es-vpay-image">
  <img src="https://picsum.photos/g/200/300" alt="Aplicación Vpay">
</div>

CSS

.que-es-vpay-image {
  float: right;
  margin-top: 5%;
  position: relative;
}

.que-es-vpay-image img {
  position: absolute;
  bottom: 0;
}

请告诉我这是否适合您。

Answer 2

我设法通过将这些CSS行添加到我的背景图像来解决我的问题：

.background-image {
    min-width: none;
    max-width: none;
}

我希望这可能对其他人有用。干杯！

让图像粘到DIV的底部？不工作

2 个答案: