我需要使用媒体查询将 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>
最佳答案
内联样式将始终优先于 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;
}
...
等然后在底部使用您的最大宽度媒体查询(也是以正确的顺序,所以首先是最高的最大宽度,然后是解决较低宽度的查询)。
关于css - div 不会随着屏幕尺寸的减小而移动它们的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55443594/