尝试使用CSS和Media Query进行浮动更改

时间:2019-07-14 22:21:53

标签: html css

我试图使横向移动和纵向移动的手机上方和下方的所有媒体查询的图像浮动在左侧,然后图像变为完整显示块,即中心位置。

总结:

移动设备或更低版本(最小设备宽度:320像素)=图片为完整块(中间)

高于320px =图片向左浮动。

我还是无法正常工作。...

这是我的CSS:

.img-float {
  float:left;margin:0 20px 20px 0;
  }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .img-float {
   display:block;
   margin-left: auto;
   margin-right: auto;
 }
}

这是标记:

<p>
    <img src="https://dummyimage.com/175x80/000/fff" class="img-float">

    FutureCon put on a great show and they&#8217;re touring the US at the moment with over a dozen different IT Security Events throughout the United States. These events are particularly good for networking and advancing your career.
</p>

在使用图像类时我做错了吗?

不确定如何进行这项工作。

感谢所有帮助。

1 个答案:

答案 0 :(得分:0)

如果图像没有浮动,则displaymargin会将图像居中。

…但它浮动的。

您还需要使其停止浮动:

float: none