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

当缩小浏览器宽度时，如何将图像固定在适当的位置？

1 个答案: