我编写了一个类似 Bootstrap 的 CSS 网格系统,但我使用内联 block 而不是左浮动 block 。当然,我需要一个技巧来删除内联 block 列之间的空白。我还编写了一个小的纯 JavaScript 来做到这一点:
bodyzzz = document.getElementsByTagName("BODY")[0];
bodyzzz.innerHTML = body.innerHTML.replace(/>\s*\n*\r*\</g, '><');
我知道其他一些技巧可以删除空白,但它们仍然有错误(或弱点)。那么,对于任何前端开发专家来说,我的技巧的弱点是什么?你们认为这个解决方案是最好的吗?
最佳答案
我假设空格是由于将一个 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>
关于javascript - 使用内联 block 列的网格系统并使用 javascript 删除 html 空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34584289/