Question

我有一个主div，我必须创建具有特定高度和宽度的多个div并按行和列排列。例如5行和8列。每个div高度为80px，宽度为75px。怎么做到这一点？

我试过：

$(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>

Answer 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>' );
    }
}

Answer 2

我认为有几种方法可以解决这个问题，但我会尝试使用css浮动来解决它。你可以浮动一个div，它会失去阻塞行为，因此几个div可以在一行中。例如，如果你将所有div向左浮动，如果你给主div的宽度为640px，那么正好在主div中排列8个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单元格中添加溢出。

Answer 3

如果你不是完全坚持使用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>';)
}

表格可以完全满足您的需要，在网格中显示数据。

如何在div中的行和列中创建和排列多个div

3 个答案: