时间戳

首页 > 解决方案 > 无法在较小的屏幕上更改图像位置

html - 无法在较小的屏幕上更改图像位置

问题描述

我有一个图像，当屏幕较小时，我想在屏幕右侧对齐，在较大的屏幕上对齐到左侧 - 我有下面的代码，但不知道为什么它不能按预期工作：

body, html {
  height: 100%;
}

@media screen and (max-width: 855px) {
  .left_logo {float: right;}
}

.left_logo {
float: right;
position: absolute;
top: 4%;
left: 3%;

}
<body>

<div class="left_logo">
<img src="https://lh3.googleusercontent.com/G5oF0mhpOcQzFTrU6TDUL0JoAjzRt38weiZKua7L61WVT1z3dPcE9gUu-W2EwtM9cZU=s180-rw">
</div>

  
</body>

示例：https ://jsfiddle.net/oak22424/djbmqyk0/2/#&togetherjs=JRRSOGIcor

我错过了一些明显的东西吗？

标签： htmlcss

解决方案

你不能使用position:absolute and float - 它的一个或另一个。

当您想将图像定位在特定的top值left时，您可以删除浮动并只使用位置：绝对。要将其向右移动，您可以设置right为您想要的任何值，并设置left为auto清除之前的 3% 值。

.left_logo {
  left:auto; /* reset the value for left */ 
  right:3%;
}

另请注意，您还需要在更通用的 CSS之后包含媒体查询，否则它将被后面的 CSS 覆盖。

基于您的小提琴的工作片段- 全屏查看以查看图像向左移动： 

.left_logo {
    position: absolute;
    top: 4%;
    left: 3%;
}

@media screen and (max-width: 855px) {
  .left_logo {
      left:auto; /* reset left value */
      right:3%;
  }
}
<div class="left_logo">
<img src="https://lh3.googleusercontent.com/G5oF0mhpOcQzFTrU6TDUL0JoAjzRt38weiZKua7L61WVT1z3dPcE9gUu-W2EwtM9cZU=s180-rw">
</div>

推荐阅读