jQuery - 計算div寬度 - divs不適合在屏幕上（奇怪的行爲）

我使用jQuery來計算divs的寬度。例如：第一個我用jQuery - 計算div寬度 - divs不適合在屏幕上（奇怪的行爲）

var width = $(window).width(); 
var cWidth = width * 0.96; 
$('#parent').width(cWidth);

後來

var boxWidth = cWidth * 0.25; 
$('.box').width(boxWidth);

我的HTML看起來

<div id="parent"> 
<div class="box">[image here]</div> 
<div class="box">[image here]</div> 
<div class="box">[image here]</div> 
<div class="box">[image here]</div> 
</div>

正如你看到我在同一條線上四盒，我的意思是4個格。所以當窗口寬度爲1366px時，它給我4個寬度爲327.84px的div（1366 * 0.96 = 1311.36px; 1311.36px * 0.25 = 327.84px）

它的作用就像一個魅力。

cWidth = 1295.04px

這樣：

http://www.wytworniaprojektu.eu/screen_1366.jpg

的問題時，屏幕分辨率爲1349px（但不僅限於）

然後我的jQuery的計算腳本GIVS我發生這種情況。盒子的寬度爲：323.76px（1349 * 0.96 = 1295.04px; 1295.04 * 0.25 = 323.76px）

它應該合適治療，但其中一人去到下一行：

http://www.wytworniaprojektu.eu/screen_1349.jpg

我不明白是怎麼回事？數學計算是正確的，所以它看起來與小數部分的問題？

有什麼想法？

來源

2014-06-07 Beata Dutkiewicz

httP://www.wytworniaprojektu.eu/#wok - 你可以在這裏看到它 –

如果你給瀏覽器一個小數像素，他們必須讓st。與這個數字，因爲他們能夠只顯示像素，而不是他們的部分。

瀏覽器之間有區別，其中一些圓形小數像素，一些樓層像素，可能是ceil像素。

這就是要點，如果他們的細胞或圓形像素向上（同樣當你有XX.84），總寬度將是parent.width() + 1（或更多）>最後一個.box沒有空間和goe到第二行。

可能的解決方案：再添加一個包裝，JSFiddle：http://jsfiddle.net/H97Ay/。

來源

2014-06-07 08:54:08 panther

你是我的主人！ –

兩件事情：

以確保它們適合，地板上的0.25相乘的結果：
```
var boxWidth = Math.floor(cWidth * 0.25); 
```
這樣的話，你不會有分數加起來奇怪。瀏覽器對小數像素值所做的操作可能不是您期望的操作，所以我通常會避免它們。（我可能也會爲你的父母輪轉或放置你的整體寬度，所以你會得到一個整數。）

我也想刪除空格之間的空格，因爲空格的寬度非零。

<div id="parent"><div class="box">[image here]</div><div class="box">[image here]</div><div class="box">[image here]</div><div class="box">[image here]</div></div>

Live Example（調整大小時調整窗口的大小）。 （我假設.box divs有display: inline-block或類似的。）

來源

2014-06-07 08:53:22

jQuery - 計算div寬度 - divs不適合在屏幕上（奇怪的行爲）

回答

相關問題