我有一个 18 x 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>