如何在固定位置的底部Div中将3个Div并排对齐

Question

这是一个看起来比较简单的问题，但我仍然难以获得精确的输出。我需要将3个div对齐在页脚内的一个div中。我在Google上尝试过很多方法，之前也曾经成功过，但在页脚固定位置时它无法正常工作。

在这张图片中，白色容器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>

我做错了什么？请解释一下。

- ssss05

---

你能发布一下标记吗？我在这个链接里看到了它：http://jsfiddle.net/ap6EG/ - Toni Michel Caubet

是的，这就是为什么我在请求帮助的原因 :-( - ssss05

只需将 .footer-center 作为第一个子元素即可 ;) - Toni Michel Caubet

为确保，您是在尝试完成图像显示的内容吗？ - Rick Calder

Answer 1

摆脱所有的浮动。将display: inline-block添加到三个内部div中的每一个，并调整它们的宽度（为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”的代码片段。

- Forty-Two

---

那个小提琴没有使用我发布的CSS。 - Forty-Two

@ssss05，请查看我添加的fiddle。 - Forty-Two

Answer 2

这是因为您的居中 div 没有浮动，

将此代码添加到 div .footer-container div .footer-center 中

float: left or float:right

- maximus ツ

Answer 3

使用float:left

这是我的代码

<div style="width:100%; background-color:#FF6600">

<div style="width:33%; background-color:#FF1100; float:left">div1</div>
<div style="width:33%; background-color:#FF6655; float:left">div2</div>
<div style="width:33%; background-color:#FF3333; float:left">div3</div>

</div>

这应该可以工作，你会失去1%的宽度，但对我来说效果很好...颜色只是为了看到3个不同的div，你可以将其放入CSS中，对吧？

- Isaac Martin Otim

Answer 4

将左右的浮动去掉，然后将它们绝对定位在容器内部。这是假设您想要完成图像所显示的内容。如果您只想让所有三个并排显示，那么您的CSS就可以正常工作，只需从名称中删除除类名以外的所有内容（就像我下面所示的那样）

http://jsfiddle.net/calder12/rnjtb/2

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

.footer-left
{
background-color:#f00;
width:33%;
height:31px;
position:absolute;
bottom:0;
left:0;
}

.footer-right
{
background-color:#0f0;
width:33%;
height:31px;
position:absolute;
bottom:0;
right:0;
}

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

- Rick Calder

Answer 5

让中间的 div 也向左浮动。如果这不起作用，给三个子 div 添加属性 position:relative 或 position:static。

如果这仍然没有帮助，我怀疑问题出在你的 HTML 代码上。

- paddotk