html - 缩小浏览器宽度时如何将图像保持在原位？

Question

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

在我尝试修复它的过程中，我尝试将它的位置设置为绝对位置，但这没有用。我也试过列出其他东西的洗衣 list ，但没有成功

当我使我的浏览器宽度小于 991 像素时，如何让它保持原位？

如果这似乎是一个模糊的问题，我提前道歉。

@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 来支持你的按钮向左浮动，并使它们成为视口(viewport)宽度的一半大小

场景 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;
}