Question

http://jsfiddle.net/prashanthcr/cv5c3cah/1/

HTML

<h2 id="header">Etch-a-Sketch!</h2>
<div id="wrapper">
    <div id="grid"></div>
</div>
<input id="size" type="number" value="10">
<button id="button">New Grid</button>

JS（Jquery）

$(document).ready(function() {
    var cellsPerSide = $("#size").val();
    var cellSize = $("#grid").width() / cellsPerSide;
    $(".cell").css({"width": cellSize, "height": cellSize, "opacity": "1"})

    for (var i = 0; i < cellsPerSide * cellsPerSide; i++) {
        $("#grid").append("<div class='cell'></div>");
    }

});

CSS

.cell {
    background-color: red;
}

我尝试了一种固定单元格宽度和高度的静态解决方案。但是，当我尝试使用动态大小时，它不再显示div。我该怎么做才能做到这一点？

我试图在网格div中创建一个单元格网格，中间没有间隙。

我只是尝试使用display：inline-block，但每次换行都会给我额外的空间。

Answer 1

我使用

修复了它

float: left;

而不是改变显示。

http://jsfiddle.net/prashanthcr/cv5c3cah/2/

将div添加到div以创建div网格

1 个答案: