如何對齊3個div並排在頁腳Div（固定位置）

這是感覺簡單的問題，但我努力獲得確切的輸出。我需要在頁腳中對齊3格的div。我在谷歌嘗試了很多，之前也工作過。但在頁腳固定的位置它不能正常工作。 enter image description here 如何對齊3個div並排在頁腳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>

我究竟做錯了什麼？請解釋一下。

來源

2012-12-07 ssss05

你能後的標記？我看到它就像你的形象：http://jsfiddle.net/ap6EG/ –

是啊這就是爲什麼我要求幫助:-( – ssss05

只是放置.footer中心作爲第一個孩子;） –

擺脫所有的花車。添加顯示：內聯塊到三個內部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

來源

2012-12-07 13:43:33

http://jsfiddle.net/ap6EG/沒有它的一個接一個下來 – ssss05

那個小提琴沒有使用我發佈的CSS。 –

@ ssss05看到我添加的小提琴 –

讓中間的div也浮起來。如果這樣做沒有幫助，請給三個孩子分配房產position:relative或position:static。

如果這沒有幫助，我懷疑問題在於你的html代碼。

來源

2012-12-07 13:32:50 poepje

不，它沒有工作 – ssss05

小心顯示html代碼？ :) – poepje

這是因爲您居中的div沒有浮起，

添加此代碼的div .footer容器DIV .footer中心

float: left or float:right

來源

2012-12-07 13:51:23

使用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 differentnts divs ..你可以把它放入css ..正確嗎？

來源

2012-12-07 13:53:28

將浮標從左側和右側取下，並將它們絕對放在容器內。假設你想完成圖片顯示的內容。如果你只是想通過側的所有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%; 
}

來源

2012-12-07 13:58:32

如何對齊3個div並排在頁腳Div（固定位置）

回答

相關問題