0

私は何百もの長方形の div を作成していますが、今ではそれらを 10 列と 10 行の構造のようなグリッドに配置する必要があります。どうやってやるの。重要なことの 1 つは、上、下、左、または右の css スタイルを % にする必要があることです。これは、ズームインとズームアウトのインプ機能があり、スタイルを % から px や em などの他のスタイルに変更する場合、divが重なります。これを行う方法はありますか。私が試しているとき、divは上下に配置されています。これが私がやったことです

            setCss = function($divId,$len) {
            //$len specifies the count number of the particualr div  
            //  $divId = $("#window3");
                alert("xmlLength is :"+$len);
                alert("set CSS::"+$divId);
                if ($len<3)//(i%2==0)
                {
                    var size = 10;

                    $("div#"+$divId).css("top",size*$len+"%");
                    $("div#"+$divId).css("left",size*$len+"%");
                    $("div#"+$divId).css("transform","none");
                    $("div#"+$divId).css("margin","10px");

                }
                if (i>=3 )
                {
                    var size = 10;
                    $("div#"+$divId).css("top",size*$len+"%");
                    $("div#"+$divId).css("left",size*$len+"%");
                    $("div#"+$divId).css("bottom",size*$len+"%");
                    $("div#"+$divId).css("right",size*$len+"%");

                    $("div#"+$divId).css("transform","none");
                    $("div#"+$divId).css("margin","10px");

                }
            //  top:10%;left:20%;transform:none;margin:10px
                /*
                        Define the CSS for creating the grid like structure for 100 small divs
                */
            };

私は差分の組み合わせを試しましたが、どれもうまくいきませんでした。任意のポインターが非常に役立つ可能性があります。ありがとう！

4

1 に答える 1

1

列と行が必要な場合は、次のことができます。

  • テーブルを作成する
  • divに設定display:inline-blockし、10ごとに空の追加divを追加します。display:block
  • divに設定float-leftし、10ごとにそのdivに追加しclear:rightます。

2番目と3番目のオプションを使用min-width:[10*divWidth]して、コンテナに設定する必要があります。

編集：

ああ、絶対位置のdivを使用しているようです。

i 次に、インデックスIfを使用してすべてのdivを反復処理し、プロパティをi%10 == 0増やしてリセットします。topleft

topまたは、さらに良いことに、currentとleft、の変数を持つ必要はありません。

var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div');
d.className='cell';
d.style.width=wid+'px';
d.style.height=hei+'px';
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    c.style.top=Math.floor(i/cols)*hei+'px';
    c.style.left=i%cols*wid+'px';
    document.body.appendChild(c);
}

ここにjsfiddleがあります：http：//jsfiddle.net/4pj74/

編集2：

最初にすべての要素を作成してから、それらの位置を設定する場合は、

// Creating variables
var cols=10,
    rows=5,
    wid=10,
    hei=20,
    d=document.createElement('div'),
    wrap=document.getElementById('wrapper');
d.className='cell';
    d.style.width=wid+'px';
    d.style.height=hei+'px';

//Creating elements
for(var i=0;i<cols*rows;i++){
    var c=d.cloneNode(false);
    wrap.appendChild(c);
}

//Setting position
for(var i=0;i<wrap.childNodes.length;i++){
    setCSS(i);
}
function setCSS(i){
    var el=wrap.childNodes[i];
    el.style.top=Math.floor(i/cols)*hei+'px';
    el.style.left=i%cols*wid+'px';
}

<div id="wrapper"></div>（多分jsfiddleが体に他のものを追加するので、今私はそれらを追加します）

ここでそれを参照してください：http：//jsfiddle.net/4pj74/3/

于 2012-08-24T18:28:11.507 に答える