将三个正方形与相同的类对齐并将绝对位置靠近另一个

Question

我问自己是否可以将一些元素与同一个类对齐，而position: absolute一个元素与另一个元素对齐。经过一个小时的测试后，我找到了一个解决方案：http://jsfiddle.net/hv01ad1r/1/

但是，如果我尝试将它们设为display:inline-block，则元素之间会有一些空格。

http://jsfiddle.net/hv01ad1r/2/

我想了解为什么会出现这个意想不到的空间，我该如何摆脱它。

Answer 1

因为您使用内联块，div就像普通文本一样在行内。所以神秘空间是代码中div之间的空白区域。删除代码中divs之间的空格：

<div id='container' style="height:100%;width:200px;position:absolute">
<div class="square">square 1</div><div style="height:100px;width:100px;display:inline-block"></div><div class="square">square 2</div>

http://jsfiddle.net/7wLrhdte/1/