Question

我想保持橙色<div>＆＃34;卡住＆＃34;在调整大小时，谷歌徽标的底部。不知道我需要做些什么来实现这一目标。这样做的原因是，使用我的实际代码，我需要使用调用按钮来保留我调整大小的图像。

HTML

<div id="offer-intro">
    <img class="product-u-shape" src="http://vignette2.wikia.nocookie.net/logopedia/images/d/d2/Google_icon_2015.png/revision/latest?cb=20150902024016">
    <div class="offer-intro-image">
        <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" width="220px">
    </div>
<div id="offer-intro-holder">
    <h4>Get up to</h4>
    <h4><strong>$$$$</strong> in <strong>FREE</strong></h4>
    <h4><strong>Equipment</strong><span class="ast">*</span></h4></div>
    <div class="hero-filler"></div>
</div>
<div class="call-now"><span class="call-now-cta">Call now for a free quote</span>
    <br>
    <a class="phone-number" href="tel:888-888-8888">CALL <strong>888.888.8888</strong></a>
</div>

CSS

#offer-intro,
#offer-intro-holder {
  max-width: 590px;
  width: 100%;
  display: inline-block;
  text-align: center;
  float: none;
}

#offer-intro {
  padding-bottom: 110px;
}

#offer-intro img.product-u-shape {
  max-width: 620px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  margin: 0;
}

#offer-intro img {
  float: none;
}

#offer-intro #offer-intro-holder h4 {
  color: #444;
  text-align: center;
  line-height: 45px;
}

.call-now {
  padding: 0;
  margin: 0;
  padding-top: 7px;
}

.call-now .phone-number {
  background-color: #ff8200;
  display: inline-block;
  padding: 20px;
  font-size: 30px;
  max-width: 690px;
  width: 100%;
}

.offer-intro-image {
  padding: 0 0 30px 0;
  background-color: #fff;
  margin-bottom: 30px;
}

.offer-intro-image img {
  float: none;
  max-width: 226px;
  width: 100%;
}

@media screen and (max-width: 690px) {
  .offer-intro-image {
    padding: 15px;
  }
  .call-now {
    padding: 0;
  }
  .call-now .phone-number {
    font-size: 16px;
  }
}

Answer 1

一种方法是将两个div放在一个父容器中。

将position: relative分配给容器，然后在一个或两个子div上使用position: absolute，以便在父级中定位它们。

以下是使用您的代码（简化）的示例：

<强> HTML

<div id="offer-intro">
    <img class="product-u-shape" src="http://vignette2.wikia.nocookie.net/...">
    <div class="call-now"><span class="call-now-cta">Call now for a free quote</span>
        <br>
        <a class="phone-number" href="tel:888-888-8888">CALL <strong>888...</strong></a>
    </div>

</div>

<强> CSS

#offer-intro {
    position: relative;
}

.product-u-shape {
    width: 100%;
    height: auto;
}

.call-now {
    position: absolute;
    width: 100%;
    top: 100%;
}

DEMO

Answer 2

想到这个，不知道这是不是你要找的东西：

.wrapper {
  margin: 0 auto;
  max-width: 325px;
}

.logo {
  padding: 5px;
}

.description {
  background-color: #CF7823;
  text-align: center;
}

.description p {
  padding: 15px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

<div class="wrapper">
  <div class="logo">
    <img src="http://i.imgur.com/BvSHAhu.jpg" alt="Logo" class="img-fluid">
  </div>
  <div class="description">
    <p>Call Now: <a href="tel:888-888-8888"><b>888.888.8888</b></a></p>
  </div>
</div>

你的图片看起来很大，所以我下载了它，重新调整尺寸，然后重新上传。

如何在调整大小时将<div>粘贴到另一个<div>？

2 个答案: