Question

这是一个简单的问题，但我很难得到确切的输出。我需要在页脚内部对齐3个div。我在谷歌尝试过很多，之前也在工作过。但在页脚固定位置，它不能正常工作。 enter image description here

在该图像中，白色容器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中的每一个并调整它们的宽度（至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

Answer 2

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

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

Answer 3

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

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

float: left or float:right

Answer 4

使用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..right中吗？

Answer 5

从左右两侧取出浮子，并将它们放在容器内。这假设您想要完成图像显示的内容。如果你只是希望所有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%;
}

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

5 个答案: