CSS定位。（包括例如）

我的CSS代碼可以在這裏找到： http://cssdesk.com/KGUfn CSS定位。（包括例如）

我試圖讓在底部箱（ICON1，ICON2和ICON3）旁邊的海誓山盟和中心他們，但它不工作。

我在做什麼錯？

來源

2012-11-05 Aristona

給予好評用於提供代碼看着。 Downvote for Comic Sans :) –

不是宇宙的無味。 :)「font-family：'Cinzel裝飾'，草書;」該網站不接受我相信的字體。 – Aristona

您可能需要實際使用字體嵌入。 :)你可能會檢查你是否可以從谷歌字體中獲得Cinzel裝飾。 –

您目前的定位#icon-1爲position: absolute; left: 0; bottom: 0;和#icon-2爲position: absolute; right: 0; bottom: 0;

要獲得您所描述的效果，請嘗試使用：

#icon-1, #icon-2, #icon-3 { 
    position: absolute; 
    bottom: 0; 
} 
#icon-1 { left: 50%; margin-left: -200px; } 
#icon-2 { left: 50%; margin-left: -67px; } 
#icon-3 { left: 50%; margin-left: 67px; }

因爲它們分別133px寬度的3個要素，您的寬度總共爲399px（基本上爲200px）。正因爲如此，如果您從父元素（每個項目上都有）開始，然後使用餘量來抵消每個元素 - 您將獲得您之後的佈局。

#icon-1設置的margin-left: -200px佔整個寬度的#icon-1，加上寬度的#icon-2的一半。 #icon-2的偏移量-67px將其左邊緣設置在距離中心左側一半的距離處（居中）。 #icon-3的偏移量67px只是將其向右移動的量等於#icon-2的一半寬度 - 使它們不重疊。

舉一個例子，這裏是一個更新到您的原代碼：http://cssdesk.com/cXrsP

而且 - 你原來#icon-3沒有出現，因爲你的CSS說的ackground-color: yellow代替background-color: yellow

來源

2012-11-05 21:40:48

完美回覆，但爲什麼我們不使用絕對位置上的icon3？ – Aristona

啊 - 因爲我原本奇怪地回答了這個問題。 :)我會更新反映。 '＃icon-3'絕對應該也是絕對定位的。 –

Icon3需要right:上的單位，並且您有一個錯字「ackground-color：yellow;」

#icon-3 
    { 
     position:absolute; 
     bottom:0; 
     right:300px; 
     width:133px; 
     height:152px; 
     background-color: yellow; 
    }

來源

2012-11-05 21:40:47

CSS定位。 （包括例如）

回答

相關問題

CSS定位。（包括例如）