使用嵌套divs的頁腳

我正在嘗試將頁腳添加到我的網站，但文字不斷移動。使用嵌套divs的頁腳

<div id="footer"> 
    <div id="footerchild"> 
    <a href=".html">1</a> 
    </div> 
    <div id="footerchildone"> 
    <a href=".html">2</a> 
    </div> 
    <div id="footerchildtwo"> 
    <a href=".html">3</a> 
    </div> 
    <div id="footerchildthree"> 
    <a href=".html">4</a> 
    </div> 
</div>

和CSS

#footer { 
    margin-left: 100px; 
    background: #812; 
    box-shadow: 1px 2px 40px 1px #444; 
    border: 1px solid black; 
    width: 1040px; 
    height: 300px; 
    position: absolute; 
} 

#footerchildone { 
    float: right; 
    margin-right: 500px; 
    margin-top: -22px; 
} 

#footerchildtwo { 
    float: right; 
    margin-right: 350px; 
    margin-top: -22px; 
} 

#footerchildthree { 
    float:right; 
    margin-top: -22px; 
    margin-right: -250px; 
}

我想每一列與特定距離centrated，但是當我例如childthree移動，第二個孩子吧如下。它不應該是這樣，因爲我給他們每個人一個單獨的股利。問題是什麼？

來源

2012-05-31 Johnny Hankgard

他們相對相對定位，沒有CSS屬性那裏指示他們分開行爲，你應該使用位置：絕對如果你想他們無視對方 – Ayyash

我試過位置：絕對，但它沒有工作。你是否認爲每個孩子？ –

是的約翰尼，他們都應該絕對定位，把它想象成樂高部分，也就是說如果你真的希望他們固定在位，但讓我告訴你，它是非常不尋常的在網絡中固定部件，他們應該流動，以防萬一你在未來改變內容，他們應該適應沒有太多的麻煩 – Ayyash

我認爲你企圖做到這一點：

http://jsfiddle.net/65GaS/5/

就這麼簡單還是我誤解你了。

來源

2012-05-31 11:07:11 markvandencorput

好的謝謝！我忘記了名單 –

http://jsfiddle.net/vvjAJ/

HTML

<div id="footer"> 
<div id="footerchild"><a href=".html">1</a></div> 
<div id="footerchildone"><a href=".html">2</a></div> 
<div id="footerchildtwo"><a href=".html">3</a></div> 
<div id="footerchildthree"><a href=".html">4</a></div> 
</div>

HTML，因爲你給了他們float: right;

#footer 
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;} 
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;} 
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px} 
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px} 
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}

來源

2012-05-31 11:20:37

你的孩子divs一起移動。

這CSS代碼：

#footerchildone{float: right; 
       margin-right: 500px; 
       margin-top: -22px}

就是說footerchildone必須保持500個像素右右，從它的任何其他東西。如果你想讓你的div保持精確的位置，你可以給他們絕對的位置。在這種情況下，沒有指定的利潤率，但使用top, left, fight, bottom將您的div：

#footerchildone{position:absolute; 
       right: 500px; 
       top: -22px} 

#footerchildtwo{position:absolute; 
       right: 350px; 
       top: -22px} 

#footerchildthree{position:absolute; 
        top: -22px; 
        right: -250px}

您可能要添加text-align:center居中文本你也將（如果這是你的意思是由centrated列。）在使用position:absolute時可能需要指定每個項目的width和height。

最後使用負值的邊距或定位div似乎有點混亂。

來源

2012-05-31 11:30:03 Jakub

您需要添加text-align：center來爲父div的文本居中，並使每個子div都爲position：relative;顯示：內聯塊;它會自動對齊父div的中心，並確保刪除float：子div的權限。希望這會對你有用。

來源

2012-05-31 11:49:51 Gopikrishna

使用嵌套divs的頁腳

回答

相關問題