css - 响应图像在移动设备上未正确对齐

Question

我在页面上有一张图片通过以下 CSS 右对齐

http://jsfiddle.net/jdp3Z/

我希望在移动设备上查看时图像向左对齐(尤其是在横向模式下。我尝试使用以下代码:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
img {
    float: left;
}
}

我想这还不够，因为这似乎并不能解决问题。我错过了什么？

Answer 1

在这种情况下你需要重写正确的选择器 img.image-right 因为这个类使它比 img 更具体然后你不能重写 float .试试这个:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
   img.image-right {
    float: left;
   }
}

查看此演示 http://jsfiddle.net/jdp3Z/1/调整窗口大小。