javascript - 如何使用循环制作 16 x 16 的行内 block 网格？

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。

如何让它们在 line div 中正确显示为 inline-block？

还有其他更有效的方法吗？

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

Answer 1

我将 display:inline-block; 更改为 display:table-cell; for .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