響應div不工作的計算

我有一個960px寬的包裝，然後是一個930px寬的主內容包裝，包含15px的左/右邊距。在主內容包裝中，有三個浮動左邊的div，每個寬度爲280px，並具有15px的邊距 - 用於填充主要內容。爲了避免給股利的權利保證金，使其不適合我給它另一個類及其保證金權設置爲0。響應div不工作的計算

我努力使網站的響應，這些都是我的百分比計算：
包裹= 100％
主含量= 96.875％
主內容利潤率= 1.5625％
的div = 30.10752688％
DIV利潤率= 1.61290323

CSS：

#page-wrap { 
    width:960px; 
    margin: 0 auto; 
    background: white; 
} 
#main-content { 
    width:96.875%; 
    margin:15px 1.5625% 0 1.5625%; 
} 
.box { (the divs) 
    float:left; 
    width:30.10752688%; 
    min-height:160px; 
    margin:30px 1.61290323% 0 0; 
} 
.right{ (only the div to the right) 
    margin-right:0; 
}

HTML

<div id="page-wrap"> 
<div id="main-content"> 

<div class="box"> 
content 
</div> 

<div class="box"> 
content 
</div> 

<div class="box right"> 
content 
</div> 

</div> 
</div>

我不知道爲什麼的div不似乎正確地調整大小。任何幫助將非常感激！該網站現在可以在這裏看到：http://hl.kylmark.se

來源

2013-12-20 kylmark

請張貼相關代碼來重現，謝謝 – brandonscript

在Firefox中獲取Firebug並隨時隨地使用它。我試着改變你的div寬度到29％，並能夠產生更好的結果。 – dmikester1

爲什麼你需要精確的測量？我敢肯定，大多數瀏覽器都會在小數點後的3-4個位置四捨五入... –

我看到的問題是，有一個固定的10px填充所有藍色框周圍。由於填充是添加到到一個元素的寬度，它拋出你的百分比數學。

解決方案1 

你可以只改變那些方框的邊填充爲百分比值和其他事物一樣：

.blue { 
    ... 
    padding: 10px 1.0752688%; 
}

用這種方法你得到你會崩潰的邊緣較小，這可能不合意。

解決方案2

也許更好的做法是改變箱集束性來計算邊框寬度邊境，而不是從內容邊緣的內容優勢。這樣，你可以有一個10px的填充柔性容器，其寬度是正確想通內：

.box { 
    ... 
    width: 32.258065%; 
    box-sizing: border-box; 
}

一件事

您可能還需要提防的是子像素四捨五入。當您的百分比計算爲除整個像素以外的其他值時，瀏覽器必須決定如何將其舍入。如果過多的東西被舍入，寬度會變得太大，並導致內容在某些瀏覽器中跳轉。您需要在支持的瀏覽器中仔細檢查。 You can read a good explanation here。

來源

2013-12-20 21:37:52 nwalton

這樣做！我知道我錯過了那樣簡單的事情！ ;） – kylmark

響應div不工作的計算

回答

相關問題