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，即使您尝试使用媒体查询，它也不会移动。

通常，优先级为：

用！important声明的样式，
在元素上声明的内联样式
组合选择器的样式
通用选择器的样式

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

您应该只使用

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

.footer1 ul {
    list-style:none;
}

...

等然后在底部使用您的最大宽度媒体查询（顺序也是正确的，因此首先是最大宽度最大，然后是地址宽度较小的查询）。

Answer 2

我建议删除所有内联样式，并将其放入Separet文件中。

<div class="footer2">

css文件

.footer2 {
  width:600px; // for me is terrible to use magic numbers to width and height of element.
  height:20px;
  font-size:16px;
  color:white;
  position:absolute; // is really needed to change position?
  top:360px; // very bad practice
  left:978px; // very, very bad way to set left space, maybe you can center this 
  font-family: 'Abel',sans-serif; 
}

@media only screen and (max-width:1232px) { // why this value in breakpoint?

  .footer2 {
    left:20px;
  }
}

，这应该有效。

我添加了一些评论，因为您想以不好的方式实现目标。

div不会随着屏幕尺寸的减小而改变位置

2 个答案: