将 CSS 动态 Div 标签调整为静态 Div 标签的问题答案

【问题标题】：Issues with CSS Dynamic Div Tags adjusting to Static Div Tags将 CSS 动态 Div 标签调整为静态 Div 标签的问题
【发布时间】：2012-10-18 21:54:26
【问题描述】：

我在考虑静态 div 标签的动态 div 标签方面遇到了很多问题。这是我目前使用的两种样式：

动态 div 标签：

div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}

静态 div 标签：

div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}

我遇到的问题是动态 div 标记的大小不正确。它考虑了剩余边距（360px），但它也默认为 LoginBox div 标签的底部（所以它就像它的顶部边距为 350px）。下面是Div标签的实际应用：http://ordwurkz.com/

还有 HTML：

<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">

<div class="Page" id="Page">

<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
    Login   
    <div id="divTitleButtonBox" class="TitleButtonBox">

        <img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>

<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">

<img alt="System Image" src="images/loginsplash.png" />

<form method="post" action="processor\login_processor.do" id="frmLogin">    

    <table id="tblLoginContent" class="LoginContent">
        <tr>
            <td>Username:</td>
            <td>
            <input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
            <input maxlength="24" name="txtPassword" size="20" type="password" /></td>
        </tr>
        <tr>
            <td><input name="btnLogin" type="submit" value="Login" /></td>
            <td><input name="btnReset" type="reset" value="Reset" /></td>
        </tr>
    </table>
    </form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>

<div class="Display"></div>

</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>

【问题讨论】：

问题是它无法正常工作。我正在使用 jquery，所以我想知道它是否可能导致问题。这是它所在的实际站点：ordwurkz.com
我们需要知道您希望它做什么，而不是它正在做什么
它需要占据页面的整个右侧。如您所见，它只占用到第一个 Div 标签的底部。

标签： css html dynamic static tags

【解决方案1】：

你有没有机会把你的 .LoginBox 放在你的 .Display 里面，然后去掉 .Display 上的 margin-left 让 .LoginBox 浮动到 .Display 内容的左边？没有看到你的 HTML 真的很难说。

【讨论】：