jquery - 无法在媒体查询中调整图像大小和居中

Question

我正在尝试将我的图像居中并调整其大小以供移动设备查看 - 我相信我使用的是正确的 css 代码，但它似乎根本不起作用，大小没有改变而且我无法居中图片。我的 html 本身可能有问题，但我找不到问题所在。

<div width="100%">
<div id="newsletter" style="float:left; margin: -3.5% 2.05% 0 0; padding: 2% 0 2% 0; width:160px">
<a href="newsletter/" title="Newsletter"><img src="wp-content/uploads/2015/03/newsletter250px.gif" ></a></div>
<div id="calendar" style="float:left; margin: -3.5% 2.05% 0 0; padding: 2% 0 2% 0">
<a href="calendar/" title="Calendar">        <img src="http://oasissoho.com/newsite/wp-content/uploads/2015/03/calendar_link600px.png" ></a></div>
<div id="tripadvisor" style="float:left; margin: -3.5% 0 0 0;   padding: 2% 0 2% 0">
<div id="TA_cdsratingsonlynarrow289" class="TA_cdsratingsonlynarrow">
<ul id="QFGqaU" class="TA_links J7Erwn">
<li id="KcYMWG1Cj" class="ZBTdcGm">
<a target="_blank" href="http://www.tripadvisor.com/"><img  src="http://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_t ransp_340x80-18034-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&amp;uniq=289&amp;locationId=3388823&amp;lang=en_US&amp;border=false&amp;shadow=false&amp;backgroundColor=gray&amp;display_version=2"></script></div>
</div>

@media only screen and (max-device-width: 480px) {

    #newsletter  {
        width: 130%;
                    float:none;

    }
}

@media only screen and (max-device-width: 480px) {

    #calendar  {
        width: 100%;

    }
}

@media only screen and (max-device-width: 480px) {

    #tripadvisor  {
        width: 130%;
                    float:none;

    }
}

Answer 1

我看到您对 3 个 DIV 使用内联样式。所以你应该 !important 你的媒体查询 CSS。

否则它不会覆盖内联样式 CSS(优先级)。

另一种方法是移动所有内联样式并将它们放在媒体查询样式之上。