javascript - 使用内联 block 列的网格系统并使用 javascript 删除 html 空白

Question

我编写了一个类似 Bootstrap 的 CSS 网格系统，但我使用内联 block 而不是左浮动 block 。当然，我需要一个技巧来删除内联 block 列之间的空白。我还编写了一个小的纯 JavaScript 来做到这一点:

bodyzzz = document.getElementsByTagName("BODY")[0];
bodyzzz.innerHTML = body.innerHTML.replace(/>\s*\n*\r*\</g, '><');

我知道其他一些技巧可以删除空白，但它们仍然有错误(或弱点)。那么，对于任何前端开发专家来说，我的技巧的弱点是什么？你们认为这个解决方案是最好的吗？

Answer 1

我假设空格是由于将一个 div 放置在另一个 div 下方时的换行符造成的

这是一种消除空格的方法

片段

div {
  display:inline-block;
  border:solid;
  width:100px;
  height:100px;
  margin:none;
  padding:0;
}

<div>
Content1
</div><div>
Content2
</div><div>
Content3
</div>

注意起始 div 标签与前面的 div 标签结尾在同一行

编辑:更好的方法是将 css 显示设置为 display:table-cell;

这是另一个片段

div {
  display:table-cell;
  border:solid;
  width:100px;
  height:100px;
  margin:none;
  padding:0;
}

<div>
Content1
</div>
<div>
Content2
</div>
<div>
Content3
</div>