当浏览器宽度变小时，如何保持图像到位？

Question

我有一个媒体查询，当浏览器的宽度小于991时，将按钮直接对齐另一个按钮。但是，当我使浏览器宽度小于991px时，按钮开始在另一个按钮下滑动而不是留在原地。

在我尝试修复它的过程中，我尝试使其位置绝对但是没有用。我也尝试了其他东西的清单，但没有运气

当浏览器宽度小于991px时，如何让它保持原位？

如果它看起来像一个含糊的问题，我提前道歉。

@media screen and (max-width: 991px) {
 a.myImg {
      position: absolute;
      margin-left: 11em;
      margin-top: -7.7em;
  }
}

这是HTML：

<div class="container-fluid">
    <div class="col-md-6">
        <a href="#" class="myImg col-md-6 col-sm-5 col-xs-5">
            <img src="picture/path"/>
        </a>
    </div>
</div>

Answer 1

@greyskies我不完全确定我完全理解你想要实现的目标，但我在codePen上为你创建了两个例子

场景1：你有两个按钮在同一个'框' - >在这种情况下，我添加了一些CSS来支持你的按钮左浮动，并使它们的大小是视口宽度的一半

场景2：你的按钮分别放在两个方框中 - >为此，我只是修改了从'col-md-6'到'col-6'的方框中的类

如果这不是您所追求的，那么如果您可以附加所需结果的屏幕截图将会有所帮助

HTML：

<div class="container-fluid v1">
  <h1>version 1</h1>
  <div class="row">
    <div class="col-md-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-1"/>
        </a>
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-2"/>
        </a>
    </div>
  </div>
</div>
<div class="container-fluid v2">
  <h1>version 2</h1>
  <div class="row">
    <div class="col-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-1"/>
        </a>
    </div>
    <div class="col-6">
      <a href="#" class="myImg">
            <img src="https://via.placeholder.com/150x60?text=button-2"/>
        </a>
    </div>
  </div>
</div>

编译CSS：

.myImg img {
  display: block;
  width: 100%;
  height: auto;
}

.v1 .myImg {
  width: 48%;
  margin: 0 1%;
  float: left;
}