如何使用循环制作16 x 16内联块网格？

Question

我正在尝试使用循环内的循环自动生成16 x 16的方格div网格。我创建了这两个类：

.square {
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
    display: inline-block;

}

和

.line {
    text-align: center;
    vertical-align: middle;
    width: 800px;
    display: block;
    clear: both;
}

我有这个功能：

$('#b1').click(function() {
   for(i=0; i<16; i++) {
       $('#pixelgrid').append('<div class="line">');
       for(j=0; j<16; j++) {
           $('#pixelgrid').append('<div class="square">'+j+'</div>');
       }
    $('#pixelgrid').append('</div>');
   }
});

网格显示得有些正确，但square div没有像我预期的那样显示inline-block。

如何在inline-block div中将其line正确显示？

还有另一种更有效的方法吗？

这是JSFiddle：http://jsfiddle.net/5HV6s/1/

Answer 1

我将display:inline-block;更改为display:table-cell; .square并将对齐方式移至.square。

在评论中指出 @Danko 时，您根本不需要.line课程。

我还重做了你的jQuery，使其略微更优化（如果这甚至很重要）。

---

JQUERY

var $grid = $('#pixelgrid');

for (i = 0; i < 16; i++) 
{
    var row = '<div>';

    for (j = 0; j < 16; j++)
        row += '<div class="square">' + j + '</div>';

    row += '</div>';

    $grid.append(row);
}

---

CSS

body 
{
    background:#000;
}
.square 
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;

    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
}

---

的 See working jsFiddle demo 的

Answer 2

使用append()函数可能会得到一些有趣的结果（单独添加“line”div的开始和结束标记）。 。 。相反，尝试为每一行创建整个div并将方块附加到其中，如下所示：

var $newLine;
$('#b1').click(function() {
    for (i=0; i<16; i++) {
        $newLine= $('<div class="line"></div>');
        $('#pixelgrid').append($newLine);

        for (j=0; j<16; j++) {
            $newLine.append('<div class="square">'+j+'</div>');
        }
    }
});

在测试该代码并在本地应用您的样式之后，我能够看到格式正确的网格。

Answer 3

如果您希望将内容集中在内，请尝试此操作。使用line-height垂直居中，并在text-align: center类上应用.square：

<强> jsFiddle example

.square {
    height: 2.5rem;
    width: 2.5rem;
    background-color: white;
    display: inline-block;
    line-height:2.5rem;
    text-align: center;
}
.line {
    width: 800px;
}
body {
    background:#000;
}

Answer 4

您需要做三件事：

1. 这是一张桌子，使用<table>
2. 缓存 jQuery对象/选择器
3. 完成后仅附加到DOM

这是代码和JSfiddle

var $table = $('#pixelgrid');
var html = [];
var row, col;
for(row=0; row<16; row++) {
    html.push('<tr class="line">')
    for(col=0; col<16; col++) {
        html.push('<td class="square">'+col+'</td>');
    }
    html.push('</tr>');
}
$table.append(html.join(''));

CSS：

body {
    background:#000;
}
#pixelgrid {
    border-collapse: collapse;
    border-spacing: 0;
    background-color: white;
}

.square {
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}