html - CSS-每次页面宽度更改时移动元素

在我的项目中，我有一个用作导航栏的简单div。在这个div中，我有一个徽标图片。

我想要的是每次页面宽度更改时，徽标位置都会更新

我已经尝试使用媒体查询来执行此操作，但是我想每次页面宽度更改时创建一个媒体查询效率都非常低。
有没有一种方法可以更有效地完成此任务？

这是我现有的代码：

HTML：

<div id="navBar">
  <img src="{% static 'spotifyLogo.png' %}" alt="Image of the spotify logo" id="spotifyLogoImage" width="197px" height="59px">
</div>

CSS：

#navBar {
  border: 1px solid hsl(231, 12%, 89%);
  width: 100%;
  height: 104px;
}

#spotifyLogoImage {
  position: relative;
  margin-left: 854px;
  margin-top: 23px;
}


WHOLE NAV BAR CODE:

    <div id="navBar">
        <img src="{% static 'spotifyLogo.png' %}" alt="Image of the spotify logo" id="spotifyLogoImage" width="195px" height="59px">
      </div>


    #navBar {
      border: 1px solid hsl(231, 12%, 89%);
      width: 100%;
      height: 104px;
      resize: both;
      overflow: auto
    }

    #spotifyLogoImage {
      position: relative;
      float: right;
      padding-right: 200px;
    }

最佳答案

我假设从CSS margin-left中您正在尝试右对齐图像-因此，您可以改用float: right，这样它会随着其父div动态更新

#navBar {
  border: 1px solid hsl(231, 12%, 89%);
  width: 100%;
  height: 104px;

  /* Just for demo */
  resize: both;
  overflow: auto
}

#spotifyLogoImage {
  position: relative;
  float: right;
  margin-top: 23px;
}

<div id="navBar">
  <img src="https://via.placeholder.com/150" alt="Image of the spotify logo" id="spotifyLogoImage" width="75px" height="75px">
</div>

关于html - CSS-每次页面宽度更改时移动元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58983736/