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

我认为有几种方法可以完成这项任务，但我会尝试使用 css 浮动来解决它。您可以浮动一个 div，它会失去它的阻止行为，因此多个 div 可以在一行中。例如，如果您将所有 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>' )
    }
}

然后，您只需使用 javascript 添加与主 div 一样多的单元格 div。确保单词“TESTING”不超过 80px，否则你应该在 div 单元格中添加溢出。

于 2013-02-15T08:11:40.613 回答
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 回答