Question

我有这样的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值没有任何不同。

e.g。

https://i.gyazo.com/cf47cd0ee4ff20b3a9df48b3cc56d44d.png

如果您需要查看页面的其余部分，则网址为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;
}

Answer 1

花了一分钟才知道你的意思，我已经写了一篇长篇大论，谴责你，直到我意识到你真正在问什么。

1）您无需使用aboslute定位。你真正需要的是一个容器，或者一个像容器一样的现有元素。

2）这是bootstrap非常方便的地方。你可以在两个元素周围添加<div class="container">，这将是完美的。

3）对于您而言，#information内部没有容器元素，只有您的徽标<a>。因此，如果您无法更改任何HTML，则可以使用<a>模拟下一部分的容器，但是快速浏览一下，您需要进行媒体查询才能在每个分辨率下完美呈现。最简单的方法是在两个有问题的部分周围添加一个容器。

如果你无法更新HTML，请编辑你的问题并包含这些细节，也许我可以用另一种方式来看待它。

编辑：因为您可以更改代码并假设您希望背景颜色继续扩展视口的宽度：

<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 { 显示：块; 向左飘浮; 宽度：50％; / *根据需要更改此宽度，或者如果需要不同的宽度，则将其拆分为每个窗格* / } 。容器 { 宽度：80％; 保证金：0自动; }

那将为您提供基本的方式。对于响应，您可以使用媒体查询，因为80％可能在所有设备上看起来不太好，并且如果没有更多CSS调整每个窗格的子项，窗格的宽度在所有设备上看起来都不会很好。现在看起来一切都是静态像素，这总是会导致百分比宽度出现问题。这只是一个概念，但在需要的地方调整，但这应该让你朝着正确的方向前进。如果您需要更多帮助，请发表评论。

Answer 2

添加以下CSS：

#loginPane {
  position: absolute;
  left: 10px; //or however many you want, adjust it to make it at the same position.
}

这应该有效。

修改用于在面板上方定位徽标：

<script> var paneOffset=document.getElementById('loginPane').offset(); var panepx=paneOffset.split(',', 1)[0] document.getElementById('yourImgId').style.left=panepx + 'px';

另外，在您的徽标中添加position: absolute;。

无论分辨率/比例如何，如何使图像始终处于完全相同的位置？

2 个答案: