Question

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

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;">');

网格布局和图像放置

1 个答案: