CSS問題 - divs之間的差距

Question

我設計了一個佈局，我發現在divs彼此堆疊方面存在一些差距。

可有一個人幫我http://uniquedl.com/3closets/about.html

和

Answer 1

你需要這個在style.css：

img { display: block } 

，您需要將.introduction .intro-message上的高度更改爲384px，以匹配左側圖像的高度。

這樣做解決了這兩個問題。

---

作爲替代img { display: block }，你可以改爲做：img { vertical-align:bottom }。這也修復了。

See this answer可以很好地解釋這裏發生了什麼。

@Alohci解釋得非常好。

Answer 2

你必須在這兩種情況下有一個<div class="clear"></div>。我會說網頁的行爲如預期。

編輯：如果您使用谷歌瀏覽器查看此頁面，您可以右鍵單擊某個區域並選擇「檢查元素」。它將提供一個窗口，在瀏覽器呈現代碼時顯示代碼，右側會顯示另一個屬性窗口，顯示分配給正在查看的元素的CSS。

Answer 3

在他們的div

.introduction你有比格本身較大的圖像，這肯定是問題，包括其他的div

Answer 4

第一個差距：你的班級。 introduction的高度爲384px其中.intro-message（這是引入的子）的高度爲390px。

Answer 5

喜爲您網址：http：//uniquedl.com/3closets/about.html只是讓像

.introduction { 
    height: 384px; 
    overflow: hidden; 
    position: relative; 
} 

然後作風，將工作