Question

我遇到的问题是只有某些分区在垂直方向上相互重叠。我的第二个灰色“pageBreak”正在我的“subHeader”上面，不管填充修复是什么，并试图保持清除浮动。

我尝试过overflow，clearfix，old-school“clear：both;”，我仍然遇到同样的问题。（我认为这是一个与浮点相关的问题。）我甚至试过（正如你在代码中看到的那样）使用相对和绝对定位将我的第二个“pageBreak”放在我的“subHeader”之下，因为它应该是没有定位值甚至移动第二个“pageBreak”。我也有我的其他div以下这些引用偷偷摸摸到我的“subHeader”的顶部。我宁愿不使用这些修复，因为我希望CSS尽可能动态，原因很明显。

我觉得代码非常整洁，但我显然错过了一些相当明显的代码。任何帮助将不胜感激！

我已经包含了该网页的HTML和CSS供您查看。

HTML：

<div class="container">
<div class="header">
    <div style="float:left">
        <img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
    </div>
    <div style="float: right;">
        <h2>Company slogan.&#0153;</h2>
    </div>
    <div style="clear: both;"></div>
</div>

<div class="pageBreak">
</div>

<div class="subHeader">
    <div style="float: left; width: 400px; text-align: left;">
    </div>
    <div class="form" style="float: right; width: 300px;">
        <form id='login' action='login.php' method='post' accept-charset='UTF-8'>
            <input type='hidden' name='submitted' id='submitted' value='1'/>
            <div>
                <label style="float: left;" for='username' >School Email</label>
                <input style="float: right;" type='text' name='username' id='username'  maxlength="50" /></br></br>
            </div>
                <div style="clear: both;">
            <div>
                <label style="float: left;" for='password' >Password</label>
                <input style="float: right;" type='password' name='password' id='password' maxlength="50" />
            </div>
                <div style="clear: both;"></div>
                    <p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="app-test/forgot-password.php">Forgot your password?</a></p>
                    <p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="register.php">Want to register?</a></p>
            <div>
                <input type='submit' name='Submit' value='Log In' style="float: right;"/>
            </div>
        </form>
    </div>
    <div style="clear: both;"></div>
</div>

<div class="pageBreak" style="top: 400px;">
</div>

CSS：

.container {
width: 1000px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
background-color: white;
box-shadow: 10px 10px 40px #888;
}

.pageBreak {
margin-left: auto;
margin-right: auto;
width: 900px;
border-top: rgb(238,238,238) 3px solid; 
}

.header {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}

.subHeader {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}

Answer 1

您的代码中有line-height: 8px。增加段落的行高并减少分割宽度，省略一些float属性见jsfiddle

Answer 2

不知道这是否会解决问题，但是对于评论太大了......

您的HTML格式不正确，您缺少一些结束标记。这可能是最后一个标签的复制错误，但第一个看起来是真的。

请参阅下面的代码（我已经评论了需要更正的地方）：

<div class="container">
    <div class="header">
        <div style="float:left">
            <img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px">
        </div>
        <div style="float: right;">
            <h2>Company slogan.&#0153;</h2>
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <div class="pageBreak">
    </div>
    <div class="subHeader">
        <div style="float: left; width: 400px; text-align: left;">
        </div>
        <div class="form" style="float: right; width: 300px;">
            <form id='login' action='login.php' method='post' accept-charset='UTF-8'>
                <input type='hidden' name='submitted' id='submitted' value='1'/>
                <div>
                    <label style="float: left;" for='username'>School Email</label>
                    <input style="float: right;" type='text' name='username' id='username' maxlength="50"/></br></br>
                </div>
                <div style="clear: both;">
                    <div>
                        <label style="float: left;" for='password'>Password</label>
                        <input style="float: right;" type='password' name='password' id='password' maxlength="50"/>
                    </div>
                    <div style="clear: both;">
                    </div>
                    <p style="font-size: 70%; text-align: right; line-height: 8px;">
                        <a href="app-test/forgot-password.php">Forgot your password?</a>
                    </p>
                    <p style="font-size: 70%; text-align: right; line-height: 8px;">
                        <a href="register.php">Want to register?</a>
                    </p>
                    <div>
                        <input type='submit' name='Submit' value='Log In' style="float: right;"/>
                    </div>
                </div> <!-- HERE -->
            </form>
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <div class="pageBreak" style="top: 400px;">
    </div>
</div> <!-- HERE -->

Answer 3

标记下方将解决您的布局问题。

<!-- CONTAINER -->
<div class="container">

<!-- HEADER -->    
<div class="header">
        <div style="float:left"><img src="images/Logo.gif" alt="Company Logo" width="345px" height="117px"></div>
        <div style="float: right;"><h2>Company slogan.&#0153;</h2></div>
        <div style="clear: both;">&nbsp;</div>
</div>
<!-- / HEADER -->

<!-- 1ST PAGE BREAK -->
<div class="pageBreak">&nbsp;</div>
<!-- / 1ST PAGE BREAK -->

<!-- SUBHEADER -->
<div class="subHeader">

            <div class="form" style="float: right; width: 300px;">

                <!-- FORM -->
                <form id='login' action='login.php' method='post' accept-charset='UTF-8'>

                    <input type='hidden' name='submitted' id='submitted' value='1'/>

                    <div>
                        <label style="float: left;" for='username' >School Email</label>
                        <input style="float: right;" type='text' name='username' id='username'  maxlength="50" /></br></br>
                    </div>

                    <div style="clear: both;">&nbsp;</div>

                    <div>
                        <label style="float: left;" for='password' >Password</label>
                        <input style="float: right;" type='password' name='password' id='password' maxlength="50" />
                    </div>

                    <div style="clear: both;">&nbsp;</div>

                    <p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="app-test/forgot-password.php">Forgot your password?</a></p>

                    <p style="font-size: 70%; text-align: right; line-height: 8px;"><a href="register.php">Want to register?</a></p>

                    <div><input type='submit' name='Submit' value='Log In' style="float: right;"/></div>

                </form>
                <!-- /FORM -->

            </div>

            <div style="clear: both;">&nbsp;</div>
</div>
<!-- / SUBHEADER -->

<!-- 2ND PAGE BREAK -->
<div class="pageBreak">&nbsp;</div>
<!-- / 2ND PAGE BREAK -->

</div>
<!-- / CONTAINER -->

为什么只有某些div相互重叠？

3 个答案: