我正在尝试定位同一父级的一些 div 子级，给出偏移顶部和偏移左侧。它几乎没问题，但由于某种原因，jquery 将前一个项目的高度添加到下一个项目的顶部，有人可以帮我吗？
编辑：这是我的代码
<html>
<head>
<style>
.earea {overflow: hidden;width: 381px;height: 468px;margin: 0 17px;background: #f2f2f2 url(../images/earea_bg.jpg) no-repeat;padding: 10px 5px 5px;}
.doc .p{margin: 8px 0;}
.clipper{width: 100%;height: 100%;overflow: hidden;}
.counter{font-size: 8px;float: right;cursor: pointer;opacity:0;}
.pcount,.ncount,.cncount,.cpcount,.cbtn{background: transparent;padding: 2px;border: 1px none #2f4715;border-top-style: inset;border-left-style: inset;color: #FFF;}
.overl{border:1px solid black;opacity:0;background-color: #FFF;cursor: pointer;}
.editor{/*position: absolute;top: 0;left: 0;*/}
.cncount,.counted,.ncount{background:#FF0000;}
.cpcount,.counter,.pcount{background: #598527;}
</style>
</head>
<body>
<div class="earea">
<div class="clipper">
<div class="doc">
<div>
<div class="tarea">
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function trace(){
if(window.console==undefined)
alert(arguments);
else
console.log(arguments);
}
function rd(f,li,tl){
var di=li-tl;
f.text(di);
if(di>0){f.removeClass().addClass("pcount").prepend("+")}else{f.removeClass().addClass("ncount")}
return di;
}
function zpo(){
var f=null;
var ov=null;
var ct=null;
for(fl in tflds){
f=tflds[fl];
ov=$(f).data().ov;
ct=$(f).data().ct;
ov.css({width:f.width()+4,height:f.height()+2}).offset({top:gy(f),left:gx(f)-4}).end();
ct.offset({top:gy(f),left:gox(f,ct)}).end();
}
}
function cct(f){
var ct=$("<div><div>+0</div><div class='cbtn'>Editar</div></div>").addClass('counter').css('z-index',++zi);
return ct;
}
function cov(f){
var ov=$("<div></div>").addClass('overl').css({'z-index':++zi});
return ov;
}
function ae(p,c,x,y,w,h){
p.append(c);
c.css('z-index',++zi).width(w).height(h).offset({left:x,top:y});
}
function bp(){
var els=av.pags[pa].elems;
var de=null;
var ze=null;
var le=null;
var ov=null;
var ct=null;
var dt=$(d.find(".tarea"));
var x=0;
var y=0;
var w=0;
var h=0;
for(e in els){
var nm=els[e].nombre;
var rx=els[e].x;
var ry=els[e].y;
var rw=els[e].w;
var rh=els[e].h;
var fh=els[e].fh;
trace(av.pags.h, d.find(":first").height(), ry, dyo);
x=gsx(av.pags.w, d.find(":first").width(), rx, dxo);
y=gsy(av.pags.h, d.find(":first").height(), ry, dyo);
w=gsw(av.pags.w,rw,d.find(":first").width());
h=gsw(av.pags.h,rh,d.find(":first").height());
if(els[e].tipo=="txt"){
var txt=els[e].text;
var lim=els[e].limit;
var de=$("<div></div>").addClass(nm).html(txt);
if(fh!=undefined){
de.css("font-size",gsw(av.pags.w,fh,d.find(":first").width())+"px");
}
ae(dt,de,x,y,w,h);
ov=cov(de);
ct=cct(de);
var di=rd($(ct.find(":first")),lim,txt.length);
tflds.push(de);
dt.append(ov);
dt.append(ct);
de.data({ov:ov,ct:ct});
ov.add(ct).data({o:ov,c:ct,di:di,dt:de,l:lim}).mouseover(ovr).mouseout(out);
}else if(els[e].tipo=="img"){
var src=els[e].src;
de=$("<img/>").attr("src", src);
ae(dt,de,x,y,w,h);
}
}
zpo();
}
var tflds=[];
var av={
nombre:"hpage",
pags:{
w:28.82,
h:23.92,
pag1:{
elems:{
elem1:{tipo:"img",x:0,y:0,w:28.92,h:23.92,src:'images/z_hpage.jpg'},
elem2:{tipo:"txt",x:4.36,y:4.43,w:20.02,h:1.13,text:"Titular del aviso",limit:255,nombre:"tav",fh:0.69},
elem3:{tipo:"txt",x:5.91,y:6.17,w:18.45,h:1.86,text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:255,nombre:"stav",fh:0.57},
elem4:{tipo:"txt",x:5.77,y:8.02,w:18.45,h:1.13,text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..",limit:255,nombre:"cav",fh:0.5}
}
}
}
};
var zi=1000;
var _d=0;
var doc=$(document);
var pa="pag1";
var z=null;
var d=null;
var l=null;
var dtc=null;
var dsc=null;
var dcc=null;
var dto=null;
var dso=null;
var dco=null;
var dxo=0;
var dyo=0;
var inf={tav:{text:"Titular del aviso",limit:"255"},stav:{text:"Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",limit:"255"},cav:{text:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",limit:"255"}};
function gx(t){
return t.offset().left;
}
function gox(t,c){
return gx(t)-c.width()-5;
}
function gy(t){
return t.offset().top;
}
function gspw(rw,rh,sh){
return sh*rw/rh;
}
function gsph(rw,rh,sw){
return sw*rh/rw;
}
function gsx(rw,sw,rx,xo){
return (rx*sw/rw)+xo;
}
function gsy(rh,sh,ry,yo){
return (ry*sh/rh)+yo;
}
function gsw(rpw,rw,spw){
return spw*rw/rpw;
}
function gsh(rph,rh,sph){
return sph*rh/rph;
}
function init(){
d=$('.doc');
var w=0;
var h=0;
var x =0;
var y=0;
var r=0;
var sw=$('.clipper').width();
var sh=$('.clipper').height();
var sx=$('.clipper').offset().left;
var sy=$('.clipper').offset().top;
dxo=x;
dyo=y;
if(av.pags.w>av.pags.h){
r=av.pags.h/av.pags.w;
w=sw;
h=gsph(av.pags.w,av.pags.h,sw);
x=sx;
y=sy+((sh-h)/2);
}else{
h=d.height();
w=gspw(av.pags.w,av.pags.h,d.height());
x=sx+((sx-x)/2);
}
dxo=x;
dyo=y;
d.find(":first").addClass(av.nombre);
d.find(":first").css({height:h,width:w,'background-color':"#FF0000"}).offset({top:y,left:x});
bp();
}
function ovr(e){
var o=$(e.currentTarget).data().o;
var c=o.data().c;
o.css({opacity:'0.5'});
c.css({opacity:'1'});
}
function out(e){
var o=$(e.currentTarget).data().o;
var c=o.data().c;
c.css({opacity:'0'});
o.css({opacity:'0'});
}
doc.ready(init);
</script>
</body>
</html>
对不起，我不能再隔离它了。
谢谢，亚历克西斯