-1

同じ親のいくつかの 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>

すみません、もう分離できませんでした。

ありがとう、アレクシス

4

1 に答える 1

0

返信ありがとうございます。問題を確認できました。関数offset()を変更しcss()、子供position:absoluteと父親を設定しましたposition:relative。

何らかの理由で、offset 関数は前の要素の下に次の要素を配置しようとします。

于 2010-09-03T15:49:38.697 に答える