0

特定の高さと幅で複数の div を作成し、行と列に配置する必要があるメイン div があります。たとえば、5 行と 8 列の場合。各 div の高さは 80 ピクセル、幅は 75 ピクセルです。これを達成する方法は？

私は試した：

$(document).ready(function() {
 for(var i = 1; i <= 40; i++) {
  $('#test').append('<div id="page' + i + '" class="touch">TESTING</ div>' )
 }
}

HTML:

<div id="test">
</div>
4

3 に答える 3

1

次のスタイルを使用して、div テーブル構造を作成します...

.table {
    display:table;
    width: 100%;
}
.row {
    display:table-row;
    width: 100%;
    height: 80px;
}
.cell {
    display:table-cell;
    width: 75px; 
    vertical-align: middle;
}

このコードは、それがどのように機能するかについてのアイデアを提供します[おそらく、これは完全に機能するわけではありません。私はそれをテストしていませんが、どのように機能するかについてのアイデアを得る必要があります]

$(document).ready(function() {
    for(var i = 1; i <= 5; i++) {
        $('#test').append('<div class="row">' );
        for(var j = 1; j <= 8; j++) {
            $('#test').append('<div id="page' + i + '" class="touch cell">TESTING</ div>' );
        }
        $('#test').append('</ div>' );
    }
}
于 2013-02-15T08:10:12.300 に答える
0

divの使用に完全に固執していない場合は、テーブルを使用することをお勧めします。

$(document).ready(function() {
    var output = '<table>\n<tr>\n';
    for(var i = 0; i < 40; i++) {       // The `40` here is the amount of cells.
        if(i % 5 == 0 && i > 0){        // The `5`  here is the amount of rows.
            output += '</tr>\n<tr>\n';
        }
        output += '<td id="page' + (i+1) + '" class="touch">TESTING</ td>\n';
    }
    $('#test').append(output + '</tr>\n</table>';)
}

テーブルは、必要なことを正確に実行し、データをグリッドに表示するように作成されています。

于 2013-02-15T08:20:26.627 に答える
0

このタスクにアプローチするにはいくつかの方法があると思いますが、css フローティングで解決しようと思います。div をフロートさせると、ブロック動作が失われるため、複数の div を 1 行に配置できます。たとえば、すべての div を左にフロートさせ、メイン div の幅を 640px にすると、正確に 8 個の div がメイン div に並べられるはずです...

#maindiv {
    width: 640px;
}

.divcells {
    width: 80px;
    height: 75px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    float: left;
    display: block;
}

$(document).ready(function() {
    for(var i = 1; i <= 40; i++) {
        $('#maindiv').append('<div id="page' + i + '" class="divcells">TESTING</ div>' )
    }
}

次に、メインの div に必要な数のセル div を JavaScript で追加するだけです。「TESTING」という単語が 80px を超えないようにしてください。それ以外の場合は、div セルにオーバーフローを追加する必要があります。

于 2013-02-15T08:11:40.613 に答える