css - div 不会随着屏幕尺寸的减小而移动它们的位置

Question

我需要使用媒体查询将 footer1 和 footer2 定位为距左侧 20px 的绝对位置。但无论我做什么，2 个 div 都不会移动。请帮忙

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

    .footer1{

    left:20px;

    }

    .footer2{

    left:20px;

    }

  <div class="color2">
    <div class="footer1" style="color:white;position:absolute ;top:0px;             left:20px ;font-family: 'Abel',sans-serif;">
    <ul style="list-style:none; "><li style="font-size:20px; font-  weight:bold">Contact Us</li>
            <li style="font-size:15px"> </li>
            <li style="font-size:15px">No. 461, </li>
            <li style="font-size:15px">Rose Road</li>
            <li style="font-size:15px">Bk Avenue</li>
            <li style="font-size:15px">Sri- Lanka</li>
            <li style="font-size:15px">07786755422</li></ul>

     </div>


     <div class="i_info" style="font-size:30px ; position:absolute ; top : 310px">
       <a href="https://www.facebook.com/" target="_blank">  <i class="fab fa-facebook-square icon-7x" STYLE="color:white ; position:absolute ;left:1000px"></i></a>
       <a href="https://twitter.com/login" target="_blank">  <i class="fab fa-twitter-square" STYLE="color:white ; position:absolute ; left:1080px"></i></a>
       <a href="https://www.linkedin.com/uas/login" target="_blank">   <i class="fab fa-linkedin" STYLE="color:white ; position:absolute ;left:1160px"></i></a>

       </div>


       <div class = "footer2" style="width:600px;height:20px;font-size:16px ;color:white ; position:absolute;top:360px ;left:978px ;font-family: 'Abel',sans-serif;" >
        <i class="far fa-copyright"></i>
        BT Solutions

       </div>

Answer 1

内联样式将始终优先于 CSS 文件中声明的样式(除非您使用 !important 强制它们，但那是完全不同的故事)。只要您在第二个 div 上使用 left:978px，即使您尝试使用媒体查询，它也不会移动。

一般来说，优先级是:

1. 用 !important 声明的样式，
2. 在元素上声明的内联样式
3. 组合选择器的样式
4. 通用选择器的样式

此外，我真的建议您不要使用内联 css，而是将其全部放在文件中 - 无论如何您都很少需要使用内联样式，这样您就无法在它们之间共享属性具有相同类的元素。

你应该只使用

.footer1 {
    color:white;
    position:absolute;
    top:0;
    left:20px;
    font-family: 'Abel',sans-serif;
}

.footer1 ul {
    list-style:none;
}

...

等然后在底部使用您的最大宽度媒体查询(也是以正确的顺序，所以首先是最高的最大宽度，然后是解决较低宽度的查询)。