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

This is feeling simple question but i'm struggling to get the exact output. I need to align 3 div's inside a div in footer. I have tried lot in google, and worked before too. but in footer fixed position its not working exactly. 如何在页脚div中并排对齐3个div(固定位置)

这是一个简单的问题，但我很难得到确切的结果。我需要对齐3 div在页脚的div中。我在谷歌上试过很多，以前也做过。但在页脚固定的位置，它不能准确地工作。

In that image, white color container div for footer, red- left, green -right, and center.

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

here is my CSS :

这是我的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%;
}

here is HTML :

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>

What am doing wrong ? pls explain.

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

5 个解决方案

#1

Get rid of all the floats. Add Display: inline-block to each of the three inner div's and adjust their width (to 32%) so they fit side by side.

去掉所有的浮动。添加显示:内线块到三个内部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%; 
    }

Here is a FIDDLE

这是一个小提琴

#2

Make the middle div also float left. If that doesn't help, give the three child divs the property position:relative or position:static.

使中间的div也浮动向左。如果这没有帮助，给三个子元素属性位置:相对或位置:静态。

If that doesn't help, I suspect the problem lies in your html code.

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

#3

This is because you center div don't have float,

这是因为中心div没有浮点数，

Add this code to div .footer-container div .footer-center

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

float: left or float:right

#4

use float:left

使用浮动:左

here's my code

这是我的代码

<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>

This should work, u lose 1% of width, but it works great for me.. the colors are just to see the 3 differnt divs.. u can put it into css..right?

这应该是可行的，你失去1%的宽度，但它对我很有用。3 .这些颜色只是为了看不一样的东西。你可以把它放到css里，对吧?

#5

Take the floats off the left and right and absolutely position them inside the container. This is assuming you want to accomplish what the image is showing. If you just want all 3 side by side your CSS works fine, just remove everything from the names but the class names (like I have it below)

将浮动从左边和右边取出，并将它们绝对地放置在容器中。这是假设您想要完成图像所显示的内容。如果你只是想把所有的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%;
}

#1