html - 使用 CSS 调整不同设备中的文本和图像行为

Question

我有这个网页，上面有一张图片，右边和底部有段落。这是我正在使用的 CSS(抱歉，CSS 直接在 HTML 中，我必须这样做)

<div style="float:left" class='wrapper'>

<img border="0" src="images/about.png" style="float:left;margin-right:2em;margin-bottom:2em">

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

<p style="text-align:left;line-height:14px;margin:0px 0px 14px;padding:0px"><font color="#444444" face="trebuchet ms, sans-serif" size="3">Lorem ipsum here...</font></p>

</div>

它似乎在手机上也能正常工作。但我希望看到在手机或平板电脑(较小的屏幕)中显示时图像位于页面顶部的中央。目前，当我在手机中打开网站时，图像靠近页面左侧。我希望它与页面的中心对齐。

下图显示了我希望它在大屏幕和手机上的显示方式(请注意，这不是现在发生的情况。第二张图片是我想要实现的，但目前图像更接近左边距，而不是居中对齐)

哦，我只能使用 CSS。可能吗？

谢谢大家!

Answer 1

您需要在 CSS 文件中使用媒体查询。
例如，这将为宽度小于 640px 的屏幕添加属性。

@media screen and (max-width:640px){
   img{
        float:none !important;
        display:block;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}

但是您必须从 HTML 中删除 float:left 并将其放入 css 文件中，否则内联样式将覆盖媒体查询

如果你真的不会修改HTML。您应该在媒体查询中写入 float:none !important; 但使用 !important 是一种不好的做法

更新
实例http://jsfiddle.net/7d3Lv/2/
尝试调整结果框的大小