Question

当我们更新Blackboard时，我正在处理登录表单，因为它将使用新主题并且我们当前页面与它不兼容。我不是太精通设计或者是HTML / CSS的专家，我只知道如何使用检查器进行一些调查并在出现问题时进行更改。我还不是专家，知道如何实现所有具体的职位细节，以及不是。

到目前为止，我几乎只是按照我想要的方式获取了我的页面，但不同的屏幕分辨率会使渲染失效。 1920x1200完全加载中间的两个盒子，但是1440x900将它们向右中心加载。我基本上希望这两个盒子（那些被概述的盒子）始终居中并且彼此相邻，就像它们无论屏幕大小/分辨率一样。

您可以转到https://com-bb-dev.com.edu查看我现在拥有的内容，并使用检查器查看CSS。以下是我到目前为止所尝试的内容：div.loginBody位于左侧，＃loginOptions位于网站右侧。

div.loginBody 
{
background:url("images/Bb_learn_small.png") no-repeat scroll 65px 21px rgba(255, 255, 255, 0.74);
position:relative;
margin-left: 22%;
margin-top: 2%;
padding-top: 175px;
width: 529px;
border-style: solid;
border-width: 1px;
}

和

#loginOptions 
{
background: rgba(255, 255, 255, 0.72);
position: absolute;
float: right;
margin-left: 101%;
top: -1px;
width: 529px;
height: 392px;
border-style: solid;
border-width: 1px;
}

由于

Answer 1

我会将您的部分CSS从.loginBody移至#loginBox。与此同时，我会摆脱你正在进行的大量定位和保证金。

以下是使用尺寸的简单jsFiddle：http://jsfiddle.net/vWVD8/ 这个jsFiddle使用较小的尺寸，因此你可以看到一切都变得更清晰，因为小提琴的窗口很小：http://jsfiddle.net/vWVD8/1/

margin: 0 auto;将一切都集中在一起。为了使其工作，必须指定宽度。除此之外，我们将两个DIV向左浮动，以便它们排成一行。

HTML 的

<div class="loginBody">
    <div id="loginBox">
        Login Box DIV
    </div>
    <div id="loginOptions">
        Login Options DIV
    </div>
</div>

CSS

.loginBody {
    margin: 0 auto;
    width: 1074px;  /* = div width + margins + borders + padding + etc. */
}
#loginBox,
#loginOptions {
    border: 1px solid #000000;
    float: left;
    height: 329px;
    width: 529px;
}
#loginOptions {
    margin-left: 10px;
}

如何为每个分辨率完美地垂直对齐两个<div>标签？</div>

1 个答案: