这些盒子浮出页脚

时间:2013-11-10 17:38:17

标签: html css footer

需要帮助修复页脚。其中一个盒子来自页脚。所有3个应该在一条线上,每条线旁边。 Css上传并显示html。不过我已经尝试了很多东西,但似乎没什么可行的。但是右边的框总是在页脚之外,我不知道问题 所以请大家帮忙,明白我哪里出错了所以我可以学习它 谢谢你:D

Css和html

 <%-- Footer --%>

    <div id="footer">

        <div id="footer_placement">

            <div id="left">
                <p></p>
            </div>
            <div id="middel">
                <p></p>
            </div>
            <div id="right">

            </div>

        </div>
    </div>

    <%-- Footer --%>

 #footer {
    bottom: 0;
    width: 100%;
    display: block;

    background-color: #fff; 

    max-height: 50px;
}



#footer_placement {
    max-width: 1024px;
    margin: 0 auto;
    display: block;
    max-height:50px;
}

#right {


    float: right;
    height: 50px;
    width: 298px;
    background-color:black;

}

    #right img {
        height: 50px;
        width: 50px;

    }

#middel {

    height: 50px;
    margin: 0 auto;
    width: 300px;
    background-color:black;
}

    #middel p {

        text-align: center;
        color: #321a51;
        font-size: 12px;
        font-family: muli;
    }

#left {

    width: 298px;
    height: 50px;
    float:left;
    background-color:black;
}

    #left p {

        text-align: center;
        color: #321a51;
        font-size: 12px;
        font-family: muli;
    }

2 个答案:

答案 0 :(得分:1)

对此ID使用display:inline-block;:中间 - 左 - 右

Fiddle

答案 1 :(得分:1)

您的问题是width的{​​{1}}。

他们并没有真正加起来..尝试更改left right and middle divs ..让它更小

jsFIDDLE example