分步設置div高度以適應平鋪背景

我需要控制div的高度始終以20爲單位出現。我有一個重複的div背景，高度爲20像素，我希望div始終以正確的方式結束。我發現我認爲是這裏的解決方案： Set height of an element on multiples of a number?分步設置div高度以適應平鋪背景

但是，當我嘗試它不起作用。我是jquery的新手，可能犯了一個簡單的錯誤。

在下面的測試html代碼中，我期待div的高度總是以100px的步長出現，但它不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://`enter code here`www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test jquery</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script language=」javascript」> 
$(document).ready(function(){ 

    $('#testCol').height(function(i, h) { return Math.ceil(h/100) * 100; }); 

}); 
</script> 

<style type="text/css"> 
    #testCol { 
     width: 150px; 
     background-color:#FFCC00; 
    } 
</style> 
</head> 

<body> 

    <div id="testCol">df ds d sfdhs fdsf ds fhsdu ds iuhsdi fsdf dhsf sdiuh isdf iusd fiushd fiuds i uhsdiu isudf iusd fiusdh fiusd fih wtwpr wer rew</div> 

</body> 
</html>

來源

2011-09-21 Digger

從腳本標記中刪除language =「javascript」。這是預防瀏覽器運行腳本。你不需要這個指令，但如果你想使用它，它應該是：

<script type="text/javascript">

來源

2011-09-21 12:37:03 njr101

+1。而已。沒有它就能正常工作。看小提琴：http://jsfiddle.net/jasongennaro/RCLam/ –

+1。是!謝謝你njreed.myopenid.com。 – Digger

不客氣。感謝您的接受。 – njr101

一些巧妙的數學這是如下，只需設置roundTo變量要舍入的數量。

var height = parseInt($jQueryObj.height(), 10), 
    roundTo = 20; 

if (height && (height % roundTo !== 0)) 
{ 
    height = roundTo * Math.round(height/roundTo); 
}

我已經安裝在行動演示fiddleof這個位置：http://jsfiddle.net/i_like_robots/uBcHh/

你可能面臨的問題填充太所以記得要添加或減去必要。爲安全起見，您應該設置minHeight而不是height。如果真的有必要，我會真誠地問你自己或誰要求這個功能。

來源

2011-09-21 13:24:38

要設置div的20像素中的步驟高度，我改變了值如下：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#testCol').height(function(i, h) { return Math.ceil(h/20) * 20; }); 

}); 
</script>

來源

2011-09-22 09:09:09 Digger

分步設置div高度以適應平鋪背景

回答

相關問題