1

ページが読み込まれると、ページ上の の位置を見つけて、それらが並んで表示されるようにdiv_left上部を設定します。div_right私のページは複数のフォームなどで複雑であるため、これがこれを行う唯一の方法です。位置を検索/設定するコードは次のとおりです。

function findPos() {
    var curLeft = curTop = 0;
    var obj = $("#div_left");
    var position = obj.position();
    curLeft = position.left;
    curTop = position.top;
    moveToPos(curLeft, curTop);
}

function moveToPos(newLeft, newTop) {
    $("#div_right").css({
        position: "absolute",
        top: newTop + "px",
        left: (newLeft + 550) + "px"
    });
}

これらの div の上に表示される要素は、主に を介して定期的にサイズが変更され.toggle()ます。div_rightその上の要素が「拡大」または「縮小」している場合、残りのページ要素と一緒に移動しないことがわかりました。div_rightプログラムで毎回移動する必要がないように、何かに「追加」するか、何かの子にする方法はありますか? .toggle()これはアニメーションのために痛いでしょう。

編集1

ここに画像の説明を入力

ご覧のとおり、大きな div にdiv_leftandを含めることはできません。私の知る限り、フォームは分割できません。div_rightform1

編集2

基本的な HTML:

<form id="form1">
<table id="table1"></table>
<div id="div_left"></div>
</form>

<div id="div_right">
<form id="form2"></form>
</div>
4

2 に答える 2

1

あなたのコードがこの動作中のフィドルとどのように違うのか説明していただけますか? http://jsfiddle.net/FFnyA/2

編集：後世のためにコードを投稿する

html

<form method='post' id='form1'>
    <div id='table_container'>
        <table><tr><td>1</td><td>2</td></tr></table>
    </div>
    <div id='div_left'>
    </div>
</form>
<div id='div_right'>
    <form method='post' id='form2'>
    </form>
</div>
<div style='clear:both'></div>
<div id='other_content'>
    <p>Look at me</p>
</div>​

CSS

#table_container
{
    background-color: pink;
}
#div_left
{
    float: left;
    width: 100px;
    height: 100px;
    background-color: lime;
}
#div_right
{
    float: left;
    width: 100px;
    height: 100px;
    background-color: cyan;
}
​

Huangismの提案http://jsfiddle.net/FFnyA/6/のコードをいじる

于 2012-07-30T19:23:19.813 に答える
0

コードはその図よりも複雑だと思いますが、div_right を div_left の中に入れてみると、div_left は相対的に配置され、div_right は絶対的に配置されます。div_right の CSS "left" を div_left と top:0 の width + margin-right に配置します。写真にあるものを持っている必要があります。

これは div_left が固定幅であると仮定しています

更新：このようなもの

http://jsfiddle.net/FFnyA/5/

于 2012-07-30T19:14:26.710 に答える