使用inline-block列并使用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 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>