<分区>
我有一个像这样的 div:
<div id="information">
<a href="https://www.com.edu"><img src="https://com-bb-dev.com.edu/branding/themes/as_2012_orig/images/bbbanner.png"
style="position: absolute;left: 296px;"></a>
</div>
当显示器分辨率为 1920x1200 时，它正好出现在我想要的位置。但是，如果您调整窗口大小或将分辨率更改为较低的值，则图像的位置会发生变化。确保图像与其下方的元素对齐的正确方法是什么？我已经尝试过百分比，但这似乎与静态 px 值没有任何不同。
例如
https://i.gyazo.com/cf47cd0ee4ff20b3a9df48b3cc56d44d.png
如果您需要查看页面结构的其余部分，url 是 https://com-bb-dev.com.edu .它通过 SSL 验证。
当前页面构建:
<div id="information">
<a href="https://www.com.edu"><img src="https://com-bb-dev.com.edu/branding/themes/as_2012_orig/images/bbbanner.png" style="
position: absolute;
/* left: 296px; */
margin-left: 297px;
"></a>
</div>
<div id="loginPageContainer">
<div id="loginPane">
<div id="loginContainer">
<div class="clearfix loginBody">
<div id="newStu">Students: Your initial log on is your WebAdvisor Username and your password is your seven digit COM ID number. To keep your account secure, please <a href="https://password.com.edu/_layouts/PG/login.aspx?ReturnUrl=%2fdefault.aspx">use this site</a> to change your password at your earliest convenience.</div>
<div id="seeClasses">You will not see your course within your Course List in Blackboard until the official start date (review your class schedule).</div>
CSS:
#information {
height: 60px;
padding-top: 10px;
padding-bottom: 10px;
}
#loginPageContainer {
background: #eaeaea;
display: table;
text-align: center;
width: 100%;
padding-top: 30px;
height: 569px;
zoom: 1;
}
#loginPane {
vertical-align: top;
display: inline-block;
background: white;
margin-bottom: 3px;
height: 541px;
-webkit-box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
box-shadow: 0px 3px 22px 5px rgba(0,0,0,0.75);
}
#loginContainer .loginBody {
width: 585px;
}
最佳答案
我花了一分钟才明白你的意思，我已经写了一篇很长的训话来批评你，直到我意识到你真正在问什么。
1) 您无需使用绝对定位。您真正需要的是一个容器，或者一个充当容器的现有元素。
2) 这是 bootstrap 派上用场的地方。你可以只添加 <div class="container">围绕这两个元素，这将是完美的。
3) 对你来说，#information 里面没有容器元素还有你的标志 <a> .所以你可以用你的 <a> 模仿下一节中的容器。如果您不能更改任何 HTML，但快速浏览一下，您将需要媒体查询以使其在每种分辨率下都完美无缺。最简单的方法是在两个有问题的部分周围添加一个容器。
如果您无法更新 HTML，请编辑您的问题并包含该详细信息，也许我可以用另一种方式来看待它。
编辑:由于您可以更改代码并假设您希望背景颜色继续扩展视口(viewport)的宽度:
<div id="information">
<div class="container">
<a class="logo"></a>
</div>
</div>
<div id="logingPageContainer">
<div class="container">
<div class="pane1"></div>
<div class="pane2"></div>
</div>
</div>
有了这个结构，你现在可以像这样做 CSS:
.pane1, .pane2 { 显示: block ； 向左飘浮; 宽度:50%；/* 根据需要更改此宽度，如果需要不同的宽度，则为每个 Pane 拆分此宽度 */ } 。容器 { 宽度:80%； margin : 0 auto ；
这将为您提供基本的方法。对于响应式，您可以使用媒体查询，因为 80% 可能不会在所有设备上看起来都很好，并且如果没有更多 CSS 调整每个 Pane 的子级，您的 Pane 宽度在所有设备上都不会很好看。现在看起来一切都是静态像素，这总是会导致百分比宽度出现问题。这只是一个概念，但可以根据需要进行调整，但这应该会让您朝着正确的方向前进。如果您需要更多帮助，请发表评论。
关于html - 无论分辨率/比例如何，如何让图像始终位于完全相同的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33040231/