html - CSS和定位一组div

Question

我想得到这样一组 X 字母。

          X
     X
X         X
     X
X         X
     X
          X

这是我的 HTML/CSS 代码，它不符合我的要求。

<div>
<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>

<div style="display:inline-block;vertical-align:middle">
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div>
</div>
</div>

问题是什么？感谢您的帮助!

Answer 1

只需为间距添加一些边距:https://jsfiddle.net/e086qn3c/

CSS:

div div:first-child {
    margin-right: 20px;
}