2010-04-08 103 views
0

我一直在摸索着我的頭一陣子。我真的沒有經常使用HTML格式。關於JQuery的佈局問題smoothDivScroll

我有一個平滑的使用JQuery(http://maaki.com/thomas/SmoothDivScroll/)的DIVScroll滾動動態生成的圖像。

我想要的是讓多個小圖像排列在一起,每個圖像都有一段下面的文字。大約25張圖像,每張7560px的寬度爲140px。

我來達到的這個偉大的通過將一個表的DIV中,和<td>。這裏面每一個形象工程

問題我有,是我需要的滑塊從最右邊的圖像開始,並自動滑剩下。這是通過(如果你看看上面的鏈接) - startAtElementId:

但是,如果我在div內使用一個表,它將TABLE作爲一個元素,而不是TD ...所以它不工作。我知道這一點,因爲如果我將每個圖像都改爲在表格內(即25個表格),它就可以工作......但顯然格式不是我想要的。

任何人都可以想到一種方法,我可以使用這個滑塊(修改js代碼或不),有25個圖像需要彼此緊挨着,沒有差距。

我想這是一個格式問題,而不是關於滑塊。因爲我只知道一種做我想做的方式,而那下面的做法不會讓我設置startAtElementId。

<div class="scrollableArea"> 
     <table width="7560px" class="index-body"> 
     <tr> 
     <td width="140px"><center><a onclick="__doPostBack('getEarlierDate');" ><img src="../images/olderGraphs.gif" width="140" height="60"></a>Click for more</center></td> 
     <td width="300px"><center><a onclick="__doPostBack('chartClicked25');" ><cewolf:img chartid="verticalbar25" renderer="cewolf" width="300" height="60"/></a><c:out value="${date25}"/></center></td> 
     <td width="300px"><center><a onclick="__doPostBack('chartClicked24');" ><cewolf:img chartid="verticalbar24" renderer="cewolf" width="300" height="60"/></a><c:out value="${date24}"/></center></td> 

回答

1

我會刪除該表,並與一系列的div取代它來代替。裏面每個div都你把圖像和段落標記,像這樣:

<div><img src="images/myImage.jpg"><p>Image text goes here</p></div> 
<div><img src="images/myImage.jpg"><p>Image text goes here</p></div> 
<div id="startAtMe"><img src="images/myImage.jpg"><p>Image text goes here</p></div> 

使用一些CSS,你將能夠使這些div的排隊,如果你刪除所有填充和利潤,你可以與定位div的圖像並排沒有任何間隙。

+0

完美的工作謝謝你! – MichaelMcCabe 2010-05-04 11:18:08