Question

我使用两个javascript for循环制作了一个网格，由于某种原因，我在网格中的线之间有一个固定的间隙。我无法理解这种差距是什么。

这就是我所做的。

var length = 100;

var text = "";
var i;
for (i = 0; i < length; i++) {
 text += '<div>';  
    for(var x = 0; x < length; x++){
        text += '<div class="b"></div>';
    }
 text += '</div>';  
}

https://jsfiddle.net/davseveloff/wL3Ljpxo/

我认为导致它的原因是div是空的，尽管它们有宽度和高度......

任何帮助都会很棒。

TNX

Answer 1

这是因为元素和<br>标记之间的空格会以文本形式呈现，如果您将字体大小设置为0，它会在删除线条的同时消除间隙。

（Demo）

#demo {
    font-size: 0;
}

Answer 2

添加一个类并将相同的高度应用于外部div。

for (i = 0; i < length; i++) {
   text += '<div class="row">';//  
   for(var x = 0; x < length; x++){
      text += '<div class="b"></div>';
   }
   text += '</div>';
 }

CSS

.row{
   height: 2px;
}

http://jsfiddle.net/afelixj/xrcgfm7g/

请检查小提琴。为了清晰起见，我已将网格大小增加到5px并删除了背景图像。

javascript网格中的行之间的差距

2 个答案: