CSS邊界行爲奇怪

所以我找到了一篇關於響應式設計(here)的文章，我試着做出與本教程部分內容相似的內容。該網站表示，通過元素所在容器的大小來分割元素的大小（我將其除以1000而不是1050的原因是因爲div＃main上的邊距使其成爲1000px，即使頭是1050px）如果這沒有意義，那麼鏈接可以解釋它。用我的瀏覽器看起來很好，但如果我縮小窗口的大小，它就不會調整它的大小。我不完全確定我的代碼的哪一部分是錯誤的，但如果有人能幫助我，那會很棒！ Here's指向我所做的頁面的鏈接。這裏是我的源代碼：CSS邊界行爲奇怪

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body, html { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
}  

header { 
    height: 100px; 
    max-width: 1050px; 
    margin: 0 auto; 
} 

#main { 
    border-radius: 25px; 
    background-color: #aaa; 
    height: inherit; 
    max-width: inherit; 
    margin: 25px; 
} 

.box { 
    width: 47.5%; 
    height: 75%; 
    margin: 1.25%; 
    background-color: #444; 
    border-radius: 15px; 
    float: left; 
} 

</style> 
</head> 
<body> 

<header> 
    <div id="main"> 
     <span class="box"> 
     </span> 
     <span class="box"> 
     </span> 
    </div> 
</header> 

</body> 
</html>

來源

2013-02-19 Addison

在哪個瀏覽器中嘗試？我嘗試了Chrome的示例頁面，它工作得很好，看不出任何問題:( – 2013-02-19 04:16:04

我正在使用Chrome測試版，儘管我不認爲測試版會起作用，您是否嘗試調整大小？對於我來說，直到它達到一定的尺寸 – Addison 2013-02-19 04:17:27

你選擇SPAN（對於class =「box」）的任何具體原因，你可以嘗試用DIV替換它，因爲你有浮動的權利：是的，我遇到了類似的問題過去 – 2013-02-19 04:20:12

也許如果我解釋發生了什麼，你會發現實際上沒有問題。

內部盒子具有基於父容器高度的75％的固定高度。因此，所有元素的高度保持不變。但是，您的邊距是父元素寬度的一部分，因此它們隨頁面寬度而變化。隨着頁面變小，邊距變小。由於div自然在頁面上儘可能高，所以它會移向其父頁的邊界。

這一切都與您的設計預計。要修復它，請設置固定的頂部和底部邊距：

.box {margin: 12px 1.25%;}

來源

2013-02-19 04:27:24 isherwood

是的，固定12px的頂部和底部都可以使用。 – 2013-02-19 04:28:32

是的，修好了。非常感謝！ – Addison 2013-02-19 04:33:40

不客氣。請記住選擇一個答案 – isherwood 2013-02-19 04:34:37

CSS邊界行爲奇怪

回答

相關問題