Question

我有一个问题。我一直在研究一款新的JS游戏，并且几乎没有开始，我遇到了障碍：

var block = new Array(35);
var blockdata = new Array(35);
var count = 0;
var rand = 0;

while (count <= 35) {
  rand = Math.floor((Math.random() * 3) + 1);
  if (rand == 1) {
    block[count] = "images/t.jpg";
  } else {
    block[count] = "images/g.jpg";
  }
  count++;
}

count = 0;

while (count <= 35) {
  blockdata[count] = document.createElement("IMG");
  blockdata[count].setAttribute("src", block[count]);
  blockdata[count].position = "relative";
  document.body.appendChild(blockdata[count]);

  //inneficient code below XD
  if (count == 5) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 11) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 17) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 23) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }
  if (count == 29) {
    var mybr = document.createElement('br');
    document.body.appendChild(mybr);
  }

  count++;
}

#content {
  line-height: 10px;
}

<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/AA4B3110-75F6-C945-9AFA-B001BE396F4E/main.js" charset="UTF-8"></script>

<div id="content">

可以看到正在运行的游戏here

图像（t.jpg，g.jpg）被放入行中。我不希望行之间有一个小空间，您可以从上面的URL中看到。

我尝试使用CSS来使其工作，但它不会。

感谢您的帮助！

Answer 1

默认情况下，图像元素是内联块（display: inline-block）。这会在底部添加此边距。您可以将margin-bottom: -4px添加到img，或者可以将其显示为：block，但这会破坏您的布局，您需要在图片上使用float: left或使用其他css，例如display: flex在父母的图像上。

并且，移除<br>

Answer 2

这实际上是因为您要添加<br>标记。

如果你想在没有任何空间的情况下休息，那么可以使用替代方式 <ul><li>代码。

然后在每个li中，您可以提到需要多少个块。

可以通过以下方式完成：像这样更新样式块 -

<style>
body,
ul,
ul li {
    padding: 0px;
    margin: 0px;
}

#content {
    line-height: 10px;
}
</style>

<body>
<ul id="content">
</ul>
<script>
var block = new Array(35);
var blockdata = new Array(35);

var count = 0;
var rand = 0;

while (count <= 35) {
    rand = Math.floor((Math.random() * 3) + 1);
    block[count] = rand == 1 ? "images/t.jpg" : "images/g.jpg";
    count++;
}

count = 0;
var gap = 1;
var list = "<li>";
while (count <= 35) {
    var isLimit = (count > 0 && (5 * gap) + (gap - 1) == count)
    list += isLimit ? "<img src=" + block[count] + "></li><li>" : "<img src=" + block[count] + ">";
    gap = isLimit ? gap + 1 : gap;

    count++;

}
var content = document.getElementById("content");
content.innerHTML = list;
</script>

Answer 3

感谢Kantoci，我有一个解决方案。我保持所有代码相同，但我添加了一些CSS：

img {
  margin-bottom: -4px
}

其他CSS代码是不必要的，并且不需要所有<div>标记。

如何避免使用JS显示的图像中不必要的行间距？

3 个答案: