網格佈局和圖像位置

Question

我已經18×9 http://jsfiddle.net/beertastic/BY7u7/2/

的電網是否有我可以（用JS？）什麼辦法來「鎖定」圖像左上角到一個特定的DIV？

我找不到任何jQuery代碼到位置，並根據家長的div圖像..

金髮瞬間..或者這是不可能的？

#template_grid { 
width: 685px; 
height: 343px; 
margin: 0.5em; 
border: 1px solid black; 
} 

#template_grid div { 
float: left; 
width: 32px; 
height: 32px; 
background-color: #eee; 
margin: 3px; 
} 

#image_1 { 
position: absolute; 
top: 164px; 
left: 400px; 
} 

<div id="template_grid"> 
<div id="template_grid_1_1"></div> 
<div id="template_grid_1_2"></div> 
<div id="template_grid_1_3"></div> 
<div id="template_grid_1_4"></div> 
<div id="template_grid_1_5"></div> 
<div id="template_grid_1_6"></div> 
<div id="template_grid_1_7"></div> 
<div id="template_grid_1_8"></div> 
<div id="template_grid_1_9"></div> 
<div id="template_grid_1_10"></div> 
<div id="template_grid_1_11"></div> 
<div id="template_grid_1_12"></div> 
<div id="template_grid_1_13"></div> 
<div id="template_grid_1_14"></div> 
<div id="template_grid_1_15"></div> 
<div id="template_grid_1_16"></div> 
<div id="template_grid_1_17"></div> 
<div id="template_grid_1_18"></div> 
<div id="template_grid_2_1"></div> 
<div id="template_grid_2_2"></div> 
<div id="template_grid_2_3"></div> 
<div id="template_grid_2_4"></div> 
<div id="template_grid_2_5"></div> 
<div id="template_grid_2_6"></div> 
<div id="template_grid_2_7"></div> 
<div id="template_grid_2_8"></div> 
<div id="template_grid_2_9"></div> 
<div id="template_grid_2_10"></div> 
<div id="template_grid_2_11"></div> 
<div id="template_grid_2_12"></div> 
<div id="template_grid_2_13"></div> 
<div id="template_grid_2_14"></div> 
<div id="template_grid_2_15"></div> 
<div id="template_grid_2_16"></div> 
<div id="template_grid_2_17"></div> 
<div id="template_grid_2_18"></div> 
<div id="template_grid_3_1"></div> 
<div id="template_grid_3_2"></div> 
<div id="template_grid_3_3"></div> 
<div id="template_grid_3_4"></div> 
<div id="template_grid_3_5"></div> 
<div id="template_grid_3_6"></div> 
<div id="template_grid_3_7"></div> 
<div id="template_grid_3_8"></div> 
<div id="template_grid_3_9"></div> 
<div id="template_grid_3_10"></div> 
<div id="template_grid_3_11"></div> 
<div id="template_grid_3_12"></div> 
<div id="template_grid_3_13"></div> 
<div id="template_grid_3_14"></div> 
<div id="template_grid_3_15"></div> 
<div id="template_grid_3_16"></div> 
<div id="template_grid_3_17"></div> 
<div id="template_grid_3_18"></div> 
<div id="template_grid_4_1"></div> 
<div id="template_grid_4_2"></div> 
<div id="template_grid_4_3"></div> 
<div id="template_grid_4_4"></div> 
<div id="template_grid_4_5"></div> 
<div id="template_grid_4_6"></div> 
<div id="template_grid_4_7"></div> 
<div id="template_grid_4_8"></div> 
<div id="template_grid_4_9"></div> 
<div id="template_grid_4_10"></div> 
<div id="template_grid_4_11"></div> 
<div id="template_grid_4_12"></div> 
<div id="template_grid_4_13"></div> 
<div id="template_grid_4_14"></div> 
<div id="template_grid_4_15"></div> 
<div id="template_grid_4_16"></div> 
<div id="template_grid_4_17"></div> 
<div id="template_grid_4_18"></div> 
<div id="template_grid_5_1"></div> 
<div id="template_grid_5_2"></div> 
<div id="template_grid_5_3"></div> 
<div id="template_grid_5_4"></div> 
<div id="template_grid_5_5"></div> 
<div id="template_grid_5_6"></div> 
<div id="template_grid_5_7"></div> 
<div id="template_grid_5_8"></div> 
<div id="template_grid_5_9"></div> 
<div id="template_grid_5_10"></div> 
<div id="template_grid_5_11"></div> 
<div id="template_grid_5_12"></div> 
<div id="template_grid_5_13"></div> 
<div id="template_grid_5_14"></div> 
<div id="template_grid_5_15"></div> 
<div id="template_grid_5_16"></div> 
<div id="template_grid_5_17"></div> 
<div id="template_grid_5_18"></div> 
</div> 

Answer 1

我這樣做到底： http://jsfiddle.net/beertastic/BY7u7/7/

基本上我用追加和該訣竅

$('#template_grid_1_4').append('<img src="http://www.norauto.pt/sysimages/img_facebook2.jpg" class="template_image" style="z-index:300;">');