Question

我希望创建一个这样的网格：Grid

我用这个：

$(document).ready(function() {
    for (var i = 0; i < 366; i++) {
        $('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
    }
});

生成365个div，然后使用CSS创建＆＃39; grid＆＃39;样式。

.dia {
      width: 45px;
      height: 45px;
      background: white;
      outline: 2px solid;
      float: left;
  }

  .div-padre {
      width: 800px;
  }

我试图清除修复，但最后一个div出错，我不在乎它们是div，tr还是其他什么，但将来我想选择一个方格并改变颜色，所以div或tr或者某事，我需要你以后才能做到这一点

Answer 1

这是边界/大纲管理问题，请看一下：

$(document).ready(function() {
    for (var i = 0; i < 366; i++) {
        $('#div-padre').append('<div class="dia" id="div'+ i +'" /> ');
    }
});

.dia {
      width: 45px;
      height: 45px;
      background: white;
      border: 2px solid;
      float: left;
      margin-top:-2px;
      margin-left:-2px;
  }

  .div-padre {
      width: 800px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

Answer 2

使用border: 2px solid; margin: -1px;代替outline: 2px solid;

$(document).ready(function() {
    for (var i = 0; i < 365; i++) {
        $('#div-padre')
        .append(
        	$('<div>', {
          	id: 'div-' + (i+1),
            class: 'dia'
          }));
    }
});

.dia {
  width: 45px;
  height: 45px;
  background: white;
  border: 2px solid;
  margin: -1px;
  float: left;
}

.div-padre {
  width: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-padre"></div>

用HTML创建网格

2 个答案: