如何在页脚 div 中并排对齐 3 个 div（固定位置）答案

【问题标题】：How to align 3 div's side by side in a footer Div(fixed position)如何在页脚 div 中并排对齐 3 个 div（固定位置）
【发布时间】：2012-11-25 16:35:43
【问题描述】：

这是一个简单的问题，但我正在努力获得准确的输出。我需要在页脚的 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>

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

【问题讨论】：

你能张贴标记吗？我看到它就像你的形象：jsfiddle.net/ap6EG
是的，这就是我寻求帮助的原因:-(
只需将 .footer-center 作为第一个孩子 ;)
只是为了确定，您正在尝试完成图像的外观？

标签： css html alignment

【解决方案1】：

将浮子从左右两侧取下，并将它们绝对定位在容器内。这是假设您想要完成图像显示的内容。如果您只想让所有 3 个并排的 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%;
}

【讨论】：

【解决方案2】：

使用浮动：左

这是我的代码

<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 中..对吗？

【讨论】：

【解决方案3】：

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

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

float: left or float:right

【讨论】：

【解决方案4】：

摆脱所有的浮动。将 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

【讨论】：

那个小提琴没有使用我发布的css。
@ssss05 看看我添加的小提琴

【解决方案5】：

使中间的 div 也向左浮动。如果这没有帮助，请给三个子 div 属性 position:relative 或 position:static。

如果这没有帮助，我怀疑问题出在您的 html 代码中。

【讨论】：