Question

我正在尝试在显示某些数据的图像上放置一个按钮，我做了那部分，但是当我调整浏览器窗口大小或进入移动视图时，按钮不会停留在同一位置。所以基本上我需要做的是在调整窗口大小时使按钮跟随图像。我会把我的代码放在这里和网站的图片，希望有人可以帮助我。

P.S我试图在下面的代码中包含我使用的谷歌按钮和图像，但我不知道如何，我很抱歉，但我认为这不是问题。和平

.mlin {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
  padding-right: 100px;
  position: relative;
}

#mlincontainer {
  flex: 1 0 auto;
  justify-content: inherit;
  align-items: inherit;
  width: 100%;
  height: auto;
}

#cols9 {
  position: relative;
  display: flex;
  border: 0;
}

.tempbuttons {
  display: block;
  border: 0;
  position: relative;
}

#temp1,
#temp2 {
  display: flex;
  border: 0;
}

#temp1 {
  position: absolute;
  top: -260px;
  left: 80px;
}

#temp2 {
  position: absolute;
  top: -260px;
  left: 280px;
}

<main class="main">
  <h3 id="headline"> MLIN </h3>
  <div class="container" style="margin-top: 25px;">

    <div id="mlincontainer" style="margin-top: 25px;">
      <img class="mlin" src="images/mlin-small.png">

    </div>
    <!--buttons -->
    <div id="cols9" class="col s9">
      <div class="tempbuttons">
        <a id="temp1" class="btn disabled">25c</a>
        <a id="temp2" class="btn disabled">33c</a>
        <div class="col s3">
        </div>
      </div>

    </div>
    
    
    <!--I used google materialize for my buttons thats why they can't load -->

在调整窗口大小时，如何使div内的元素保持在同一个位置？

0 个答案: