使用内联块列并使用javascript去除html空白的网格系统

Question

我写了一个类似于bootstrap的CSS网格系统，但我使用的是内联块而不是左浮动块。当然，我需要一个技巧来删除内联块列之间的空格。我还写了一个小的纯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编辑:更好的做法是将css display设置为 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>

​