响应式图像在移动设备上无法正确对齐

时间:2014-01-13 19:30:02

标签: css responsive-design

我在通过以下CSS

对齐的页面上有一个图像

http://jsfiddle.net/jdp3Z/

我希望在移动设备上观看时图像左对齐(特别是在横向模式下。我尝试以下代码:

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

我想这还不够,因为这似乎没有办法。我错过了什么?

1 个答案:

答案 0 :(得分:1)

在这种情况下,您需要覆盖正确的选择器img.image-right,因为该类使其更具体而不仅仅是img,因此您无法覆盖浮点数。试试这个:

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

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