[英]Grid system using inline-block column and remove html white space with javascript
I have written a like-bootstrap CSS grids system, but i used inline-block instead left-floated block. 我已经编写了一个类似bootstrap的CSS网格系统,但是我使用了内嵌块而不是左浮动块。 Of course, I need a trick to remove white space between inline-block columns.
当然,我需要技巧来删除行内块列之间的空白。 And I also wrote a small pure-javascript to do that:
我还写了一个小的纯JavaScript来做到这一点:
bodyzzz = document.getElementsByTagName("BODY")[0];
bodyzzz.innerHTML = body.innerHTML.replace(/>\s*\n*\r*\</g, '><');
I know some other trick can remove white space, but they still have bugs (or weak points). 我知道其他一些技巧可以消除空白,但是它们仍然存在错误(或弱点)。 So, for anyone expert in front-end dev, what's my trick's weak points?
那么,对于任何前端开发专家来说,我的窍门是什么? Do you guys think this solution is the best?
你们认为这种解决方案是最好的吗?
I am assuming the space is due to that newline character when placing one div below the other 我假设在将一个div放置在另一个div之下时,该空格是由于换行符引起的
here is a way to get rid of the spaces 这是一种摆脱空间的方法
snippet 片段
div { display:inline-block; border:solid; width:100px; height:100px; margin:none; padding:0; }
<div> Content1 </div><div> Content2 </div><div> Content3 </div>
Notice how the the starting div tags are on the same line as that of their preceeding div tag endings 请注意,起始div标签与之前的div标签结尾处在同一行
Edit: A much nicer is by setting css display to display:table-cell;
编辑:更好的是通过将css display设置为
display:table-cell;
here is another snippet 这是另一个片段
div { display:table-cell; border:solid; width:100px; height:100px; margin:none; padding:0; }
<div> Content1 </div> <div> Content2 </div> <div> Content3 </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.