是否有一個原因，爲什麼身體背景漸變的寬度不總是匹配div的邊距

我想將身體背景設置爲30.08％的霜和69.2％的灰色。我正在做一個CSS漸變。那麼我該如何讓我的所有文章「保證金：30.08％」。以滿足背景的線條（所以梯度創建的背景線就像一把尺子）。下面是代碼是否有一個原因，爲什麼身體背景漸變的寬度不總是匹配div的邊距

body{ 
position: relative; 
background: -webkit-linear-gradient(left, #faf4f2, #faf4f2 30.08%, #777777 30.08%, #777777); 
} 
article{ 
    width: 300px; 
    height: 200px; 
    background: red; 
    margin-left:30.08%; 

}

這個偉大的工程，但你可以在這個jsFiddle例子中看到，該文章並不總是與梯度線對齊。因此，根據瀏覽器的寬度，在某些情況下它看起來馬虎。在jsFiddle示例中，如果將窗口大小調整爲652px（但這不是唯一的一點），則會看到我遇到的問題。不幸的是，在這麼多不同的地方發生這種事情，我不認爲媒體查詢會完成這項工作。

有沒有辦法解決它？

感謝

來源

2013-03-31 aurel

爲什麼這樣不準確的百分比？ – BoltClock

老實說，我不記得百分比如此不準確的原因。但我相信這個問題仍然存在於其他百分比值中。 – aurel

你給你的身體寬度爲100％

When you give an element a width of 100% in CSS, you’re basically saying 「Make this element’s content area exactly equal to the explicit width of its container — but only if its container has an explicit width.」

高度，然後你使用的是什麼

article{ 
margin-left:30.08%; 
}

30.08％？如上面說，你應該使用％only if its container (which in this case is a block level element <body>) has an explicit width.

你可以閱讀更多關於它在這裏..

Read it here

，我已經改變了你的代碼位從％更改值像素

body{ 
background: -webkit-linear-gradient(left, #faf42, #faf42 90px, #777777 90px, #777777); 

color: darker(#77777, 10%); 
width:300px; height:300px; 
}

它似乎現在工作。這些值僅用於示範目的。根據你的需要改變它。

希望它有幫助。

來源

2013-03-31 10:32:18 GeekyCoder

「30.08％是什麼？」這就是爲什麼我認爲我應該把100％放在身體上。我刪除了身體的寬度和高度，沒有區別 – aurel

我改變了像素的寬度和高度，而且改變了背景漸變，它似乎現在正在工作。看到我更新的答案。 – GeekyCoder

不適合我！這是你的代碼的結果http://jsfiddle.net/6BDNR/2/ – aurel

是否有一個原因，爲什麼身體背景漸變的寬度不總是匹配div的邊距

回答

相關問題