主页 / 问题 / 1145753
Accepted
Yaroslav Bondar
Asked:2020-06-26 05:44:51 +0000 UTC2020-06-26 05:44:51 +0000 UTC

如何使按钮在响应式布局中与整个内容成比例地改变其位置？

  • 772

在此处输入图像描述

**在 1280 x 721 px 的布局分辨率下，发现按钮的位置正确，但是当屏幕宽度改变时，它的位置不正确：**

在此处输入图像描述

如何使按钮在响应式布局中与整个内容成比例地改变其位置

.main-screen__clients-area {
  position: relative;
  width: 100%;
  /* display: flex;
     justify-content: space-between; */
}

.main-screen__clients {
  /* width: 30.78%; */
  float: left;
  width: 138px;
}

.main-screen__row-clients div:first-child {
  margin-bottom: 31px;
}

.main-screen__clients-title {
  color: #FFFFFF;
  opacity: 0.9;
  margin-bottom: 12px;
}

.main-screen__clients-subtitle {
  color: #FFFFFF;
  opacity: 0.5;
}

.main-screen__button {
  position: absolute;
  /* left: 28%;
            top: 31%; */
  left: 28.8%;
  right: 71.2%;
  top: 67.5%;
}

.main-screen__img-area {
  float: right;
  width: 62.2%;
  min-height: 221px;
  /* min-height: 284px; */
  background: url("../img/main-screne/item.png") no-repeat center center;
  background-size: 100% 100%;
}
<div class="main-screen__clients-area">
  <div class="main-screen__clients">
    <div class="main-screen__row-clients">
      <div class="main-screen__clients-column">
        <p class="main-screen__clients-title clients__title">
          100+
        </p>
        <p class="main-screen__clients-subtitle clients__subtitle">
          famous clients all over the world
        </p>
      </div>
      <div class="main-screen__clients-column">
        <p class="main-screen__clients-title clients__title">
          300+
        </p>
        <p class="main-screen__clients-subtitle clients__subtitle">
          years we help our clients to keep track of time
        </p>
      </div>
    </div>
    <!-- <div class="main-screen__row-clients"> -->

    <!-- </div> -->
  </div>
  <div class="main-screen__button button">
    <div class="main-screen__button-text button__text">
      discover
    </div>
    <div class="main-screen__button-img button__img">
      <img src="img/button/01.svg" alt="arrow">
    </div>
  </div>
  <div class="main-screen__img-area">
    <!-- <a href="#"><img src="img/main-screne/item.jpg" alt="watch" class="main-screen__img-item" width="396" height="221"></a> -->
  </div>
</div>

вёрстка

1 个回答

  1. Best Answer

    所以这是合乎逻辑的，你left:28%从 开始计数.main-screen__clients-area，它具有定位relative，并且比带有时钟的白色图片宽得多，在它的角落里你想打折。

    将图像和折扣包装在一个单独的块中，将定位设置为相对，并已将折扣放置在其中。

    像这样的东西：

    .wrap-img {
  width: 300px;
  margin: 30px auto 0;
  position: relative;
 }
 .discount {
  position: absolute;
  z-index: 5;
  left: -30px;
  top: -30px;
  background: #f0f;
  color: #fff;
  border-radius: 50%;
  padding: 20px;
 }
    <div class="wrap-img">
  <div class="discount">Скидка</div>
  <img src="http://placeimg.com/300/150/an" alt="">
</div>

    • 1

相关问题