我什至不知道从哪里开始。当我将大小时调整到 1600 像素以下时,即使它有适当的媒体查询来调整/隐藏/移动元素,网站也会中断 100%。但是为了查明一个我没有想到的问题,我在一个 id 中有一个 Logo ,它的高度设置为 175 像素,宽度设置为自动。在任何浏览器尺寸下,它的高度始终为 564px。查看下面的一些代码:
img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}
<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<a href="http://www.fpacny.com"><img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo"></a>
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">Services<span style="font-size: .75em"> ▼</span></a>
<ul>
<li><a href="#">Personalized Care</a></li>
<li><a href="#">Health Care Services</a></li>
</ul>
</li>
<li><a href="#">Links<span style="font-size: .75em"> ▼</span></a>
<ul>
<li><a href="#">Patient Information and Forms</a></li>
<li><a href="#">Patient Friendly Sites</a></li>
</ul>
</li>
<li><a href="#">Staff Bios</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
如果您对更多代码感兴趣 - 测试站点是:http://fpacny.com/index_test.php在这里你可以调整大小等。此时你可能会注意到主图像背景只有在添加内联 HTML 样式时才会正确调整大小:
style="height: auto; width: 100%;"
已添加。否则,那也会中断。
为什么我的链接 CSS 不会覆盖它?我开发的任何网站都从未遇到过这个问题,这让我非常抓狂!
JSFiddle:https://jsfiddle.net/hjo8pLxe/
最佳答案
你需要写
img#fpa-logo
定位 Logo 。
编辑:刚刚看到您正在使用 bootstrap 4:为什么不在图像上使用“img-fluid”类?如果行/列变小,它就不会变得太大并自动缩小。
<img class="img-fluid" {...} >
或者您是否需要任何特殊行为,而不是自动调整大小?
而且您还应该更多地了解 bootstrap 的列功能,您在 css 中使用了很多 position: absolute
,这对于您的设计来说根本不需要,并且会阻止很多如果您改用 Bootstrap ,则会出错。
关于html - CSS 样式不正确 - 不起作用(奇怪),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46546135/