CSS：混淆通過一些簡單的數學

我在this page以下CSS：CSS：混淆通過一些簡單的數學

#left { 
    display: table-cell; 
    float: left; 
    width: 20%; 
    padding: 2.5%; 
} 
#right { 
    display: table-cell; 
    float: right; 
    width: 75%; 
}

相信2.5 + 20 + 2.5 + 75 = 100。

然而，存在很大的差距#left和#right。那是爲什麼？我認爲#left和#right將佔用所有#main。

另外，我該如何重置#footer，所以它排在#left之下？

謝謝。

來源

2014-09-11 Steve

你不應該浮動表格單元格，實際上如果你擺脫了可能是解決方案的浮動。編輯：如果你可以添加一些HTML的問題也會很好 – 2014-09-11 08:32:57

因爲您正在使用框尺寸：border-box;作爲復位CSS的一部分。只是評論/刪除，然後再試一次。

* { 
box-sizing: border-box; 
margin: 0; 
padding: 0;

}

還建議使用如下的結構修復頁腳問題。

<div id="main"> 
<div id="wrap"> 
    <div id="left">Left</div> 
    <div id="right">Right</div> 
</div> 
<div id="footer">Footer</div></div>

來源

2014-09-11 08:35:07 Jaison

謝謝Jaison。你知道我是如何將#footer與#left排隊嗎？ – Steve 2014-09-11 08:44:35

只需在#right的末尾移動#footer，然後爲#left和#right添加一個額外的div包裝。 – Jaison 2014-09-11 08:52:27

這是box-sizing屬性，它是混淆了你 - 這會導致填充用起來的空間裏面的元素，而不是拉伸的元素，這是多麼的瀏覽器一般行爲。因此，通過使用box-sizing屬性和寬度：20％，瀏覽器只會以20％的寬度繪製此元素，而不是在任何一方添加額外的2.5％。

如果您將寬度設置爲25％並保留箱子大小，它將按照您的預期行事。

這是a good explanation of box-sizing by Paul Irish這應該解釋發生了什麼（和another from CSS Tricks）。

來源

2014-09-11 08:41:51 whostolemyhat

填充未添加到寬度，因爲您在所有元素上都有「框大小：邊框」。閱讀關於here。

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

來源

2014-09-11 08:48:48

CSS：混淆通過一些簡單的數學

回答

相關問題