CSS - 圖片和頁腳問題

好吧，如果你去這裏：http://opportunityfinance.net/Test/2013conf/index.html CSS - 圖片和頁腳問題

你會發現2的佈局問題

Problem 1 - Images need to be below GOLD

3個徽標此圖片需要低於「金牌」 <h4>標籤。但由於某種原因，它不會這樣做。我已將<div>標記指定爲relative的位置，因爲其中有其他div需要將圖像對齊到底部，並且這樣做是正確的，但是，它現在不會低於<h4>Gold</h4>HTML。

下一個佈局問題：

Footer is cutting off the body content

我一直在試圖像地獄讓頁面底部的頁腳。聽起來很簡單吧？錯誤！但是現在我已經知道div在底部了，它似乎正在切斷上面的div區域。所以，並不是所有的內容都顯示出來。相反，它被推到頁腳的下面。我怎樣才能解決這個問題？試圖把填充，但現在確定在哪裏和/或如何？頁腳上的頁邊距似乎也沒有做任何事情。

對此非常感謝。我一直在拼命地爭取這個簡單的佈局。這應該是一個流體佈局，因爲我調整下來的文字作爲頁面大小調整還，這似乎是完全正常的，除了這兩個問題:(

編輯

這裏是一個的是什麼樣子應用容器時，如PIC的div 100像素高度值：

div with 100 pixel height

這是給它的<h4>Gold</h4>和3個圖像之間空間太大這是ATLEAST在Opera的情況。任何可能的解決方法？

來源

2013-03-27 Solomon Closson

這裏有一個

.body { 
    background-color: #FFFFFF; 
    padding: 2em 2em 52px 0; 
}

修復你有3個標誌在一個DIV，在該專區添加的高度，例如

element.style { 
    height: 100px; 
    position: relative; 
    width: 100%; 
}

非常基本的東西真的，你應該看看clearfix's這裏http://css-tricks.com/snippets/css/clear-fix/

當您將float或position:absolute;添加到div時，放棄其reserved空間，以便使家長div認爲心不是內部的任何東西，爲此沒有height，clearfix將解決這些問題對你來說，我之所以說是監守3個標誌的都是要麼floated或absolute;

這是result我得到

enter image description here

來源

2013-03-27 00:53:28 iConnor

Clearfix是浮動元素，但沒有容器的解決方案，因爲它們完全退出該流程將做同樣的絕對（固定）定位的元素。你必須知道他們在哪裏，他們可以佔用多少空間（即使根據WCAG 2.0有200％的縮放文本），併爲此留出空間。可以是一個邊緣或填充一個元素阻止他人在那裏顯示，等 – FelipeAls 2013-03-27 01:09:38

是的，我建議clearfix的唯一原因是，因爲他既浮動也絕對，所以浮動將獲得最高的回高度，但耶感謝信息 – iConnor 2013-03-27 01:11:41

我試圖將高度設置爲100像素，並且它太低了。怎麼來的？ – 2013-03-27 01:16:59

CSS - 圖片和頁腳問題

回答

相關問題