0

下次我们更新 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;
}

谢谢

4

1 回答 1

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;
}
于 2013-07-24T00:37:13.600 回答