css - 如何在页脚 Div(固定位置)中并排对齐 3 个 div

Question

这是一个简单的问题，但我正在努力获得准确的输出。我需要在页脚的一个 div 内对齐 3 个 div。我在谷歌尝试了很多，之前也工作过。但在页脚固定位置它不能正常工作。

在该图像中，白色容器 div 用于页脚、红色左侧、绿色右侧和中心。

这是我的 CSS:

div .footer-container
{
    height:53px;
    width:100%;
    position:fixed;
}

div .footer-container div .footer-left
{
    background-color:#f00;
    float:left;
    width:33%;
    height:31px;
}

div .footer-container div .footer-right
{
    background-color:#0f0;
    float:right;
    width:33%;
    height:31px;
}

div .footer-container div .footer-center
{
    background-color:#f0f;
    margin:0 auto;
    height:31px;
    width:33%;
}

这是 HTML:

<div data-role = "footer" class="footer-container">
                <div>
                <div class="footer-left"></div>
                <div class="footer-right"></div>
                <div class="footer-center"></div>
                </div>
            </div>

哪里做错了？请解释。

Answer 1

摆脱所有的花车。向三个内部 div 中的每一个添加 Display: inline-block 并调整它们的宽度(至 32%)以便它们并排放置。

    div .footer-container {    
        height:53px;     
        width:100%;     
        position:fixed; 
        background:#ccc 
    } 
    div .footer-container div .footer-left {     
        background-color:#f00;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-right {     
        background-color:#0f0;     
        display: inline-block;     
        width:32%;     
        height:31px; 
    } 
    div .footer-container div .footer-center {    
        background-color:#f0f;   
        display: inline-block;  
        margin:0 auto;     
        height:31px;     
        width:32%; 
    }​

这是一个FIDDLE