Question

所以我的任务是将5个div对齐，使其位于X位置：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如你所见，我已经对齐了它们。我不能使用任何其他元素，只有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>

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

1 个答案:

jsFiddle