2

我遇到的问题是页脚 div 在右侧 div 后面不断上升。我有一个包含 div 的中间部分，其中 2 个浮动 div 并排，页脚是一个单独的 div，不确定我在哪里出错了，但我已经做了几个小时了，无法解决问题。

这是我的意思的js小提琴：http: //jsfiddle.net/VU3xW/

HTML：

    <div id="middlecontainer">

        <div id="leftContent">

        </div> <!-- end of left content -->


        <div id="rightContent">

             </div> <!-- end of right content -->

</div> <!-- end of middle container -->

<div id="footer">
            <p class="footernav"><a href="">Home</a> | <a href="">About</a> | <a href="">Products</a> | <a href="">Contact</a>
            </p>

            <p class="copyright">Copyright © 2013 JBA Packaging Supplies | Designed by iDesign</p>
        </div> <!-- end of footer div -->

CSS：

    #rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}
4

5 回答 5

4

您缺少的是清除浮动元素

演示

只需<div style="clear: both;"></div>在容器元素的末尾添加它，您还可以使用overflow: hidden;parent清除浮动div。同样出于演示目的，我添加了内联样式，您可以从中创建一个类并使用它来代替被认为是不好的做法的内联样式。

此外，如果要清除浮动元素，可以使用它来自行清除父元素。

.self_clear:after { /* Use this if you wish to ditch IE8 */
   content: " ";
   display: table;
   clear: both;
}

<div class="self_clear"> <!-- Example usage -->
   <div class="floated_left"></div>
   <div class="floated_right"></div>
</div>

我的这个答案将提供详细的解释，为什么你需要使用clear: both;

于 2013-07-16T09:51:19.210 回答
2

尝试添加一个清除 div

    #clear{
    clear:both;
}

这是小提琴http://jsfiddle.net/swDnn/1/

希望能帮助到你...

于 2013-07-16T09:54:40.710 回答
2

尝试这个

http://jsfiddle.net/VU3xW/4/

#rightContent{
    width: 690px;
    height: 400px;
    float: right;
    background-color:#222;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#leftContent{
    display: inline-block;
    width: 240px;
    height: 200px;
    background-color:#555;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#middlecontainer {
    width: 960px;
    background-color:#003;}

#footer {
    width: 960px;
    background-color: #121212;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;}

#footer a{
    text-decoration: none;
    list-style-type: none;
    color:#888;
    }
#footer a:hover{
    text-decoration: none;
    list-style-type: none;
    color:#444;
    }

.footernav {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#444;
    padding-top: 10px;}

.copyright {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .8em;
    color:#888;
    padding-top: 10px;}
于 2013-07-16T09:57:45.583 回答
1

尝试给你的中间容器一个 overflow:auto 属性。

于 2013-07-16T09:53:09.000 回答
1

您的页脚需要清除，因此请在 #footer 中添加 clear:both

 #footer {
    clear:both;
        width: 960px;
        background-color: #121212;
        text-align: center;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;}
于 2013-07-16T10:01:58.327 回答