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

【问题标题】：How to create and arrange multiple divs in rows and columns inside a div如何在 div 内的行和列中创建和排列多个 div
【发布时间】：2013-02-15 16:51:46
【问题描述】：

我有一个主 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>

【问题讨论】：

你需要使用display: table; display: table-column;和display: table-row;
@Mr.Alien：在这种情况下，您不妨使用实际的<table> / <tr> / <td> 元素。
@Mr.Alien ：我可以知道在哪里添加这些吗？
@Cerbrus 人们很奇怪，他们使用表格进行布局，使用 div 制作表格；）
@Mr.Alien：我只能在其中使用 div。没有桌子。

标签： javascript jquery html

【解决方案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>' );
    }
}

【讨论】：

您到底为什么要使用 CSS 来使 <div> 元素的行为完全像表格一样？如果需要以表格格式显示数据，只需使用 <table> 元素。这就是他们的目的。
他想要 divs.... 您可能希望 divs 看起来像表格的原因有很多 stackoverflow.com/questions/819237/div-element-instead-of-table
关于那里接受的答案，1 点在这里不适用，因为他说的是显示表格数据（我还没有看到有 80px * 75px 单元格的网站），2 真的如果您是 .appending 每个 div 而不是只是将其全部构建并一次性附加它，那么什么都不算数，而 3 只是一种意见，因此在 SO 上没有地位，作为答案.此外，有时 OP 想要的并不是做某事的最佳方式。无论如何，Techmonk，至少缓存你正在构建的 HTML 结构并一次性追加它。
此外，那里的大多数答案都提到，如果表格用于显示表格数据，表格并没有什么坏处。
我同意你的推理，我的意思是说有人想要 div 而不是 table 可能是有原因的，想要在 table 上使用 div 并没有错。如果他想要 div 是可以接受的，他可以用 div 做到这一点。是的，我应该缓存它，尽管我什至不确定这样添加它是否可行（我猜附加打开的 div 会自动触发要添加的关闭 div）但我只是想给他一个关于如何做的想法这不是实际的代码。

【解决方案2】：

我认为有几种方法可以解决此任务，但我会尝试使用 css 浮动来解决它。您可以浮动一个 div，它会失去它的阻止行为，因此多个 div 可以在一行中。例如，如果您将所有 div 浮动到左侧，并且如果您将主 div 的宽度设置为 640 像素，那么恰好 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 单元格中添加溢出。

【讨论】：

由于 thr 是一个可拖动的 div，我没有得到这个。

【解决方案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>';)
}

表格完全符合您的需要，在网格中显示数据。

【讨论】：