html - 使用 5 个元素创建 X 形状布局

Question

所以我的任务是将 5 个 div 对齐以放置在 X 位置:

body{
  height:300px;
  width: 300px;
}

div{
  height:100px;
  width:100px;
  float:left;
  background:black;
  overflow: none;
}

div:nth-child(2) {
    margin-left: 100px;
}
div:nth-child(3) {
    margin-left: 100px;
    margin-right: 100px;
}
div:nth-child(5) {
    margin-left: 100px;
}

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

正如你所看到的，我已经将它们对齐了。我不能使用任何其他附加元素，只能使用 5 个 div。但我有一种感觉，有一个更优雅的解决方案，更少的 css 行。很高兴看到最好的解决方案:)

Answer 1

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  /* align items to edges, horizontally */
  align-content: space-between;    /* align items to edges, vertically */
  height: 300px;
  width: 300px;
}

div {
  height: 100px;
  width: 100px;
  background: black;
}

div:nth-child(2) {
  position: relative;              /* in-flow positioning */
  top: 50%;
  transform: translateY(-50%);
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

jsFiddle