Question

我一直在考虑使用静态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>

Answer 1

你有没有机会把你的.LoginBox放在.Display中，然后删除.Display上的margin-left，以便.LoginBox只浮动到.Display内容的左边？如果没有看到您的HTML，很难说真的。

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

1 个答案: