没有“ position”属性的div定位

Question

我目前在元素布局方面存在问题。目前，我有以下架构：

我的CSS代码（简体）如下：

#case1 {
  height: 20px;
  margin-top: 0;
}
 
#case2 {
  height: 20px;
  margin-top: 0;
}
 
#case3 {
  height: 20px;
  margin-top: 10px;
}
 
#case4 {
  height: 20px;
  margin-top: 10px;
}
 
#case5 {
  height: 190px;
  margin-top: 25px;
}

问题是这样的：案例5的左侧（案例1和2下方）有区域，是否有任何方法可以迫使其向左移动（不使用“绝对”或“相对”位置）？ 谢谢。

Answer 1

只要您没有为容器指定width，该块就不会再次被推到左侧。

margin-top变得不必要，因为它只会增加额外的空间。您可能在这里有一个否定的margin-top，但这不是一个干净的解决方案。

使用不同的排序方式应该可以使网格自动化，但是当您为每个块指定margin-top时，就可以了。

div{
  display: inline-block;
  vertical-align: top;
}

.container{
  border: 1px solid black;
  width: 225px;
  padding: 10px;
}

div>div {
  background-color: orange;
  border-radius: 5px;
  width: 50px;
}

#case1 {
  height: 20px;
  margin-top: 0;
}
 
#case2 {
  height: 20px;
  margin-top: 0;
}
 
#case3 {
  height: 20px;
  margin-top: 10px;
}
 
#case4 {
  height: 20px;
  margin-top: 10px;
}
 
#case5 {
  height: 190px;
  /* 
     Note how the margin-top is removed 
     To fill in the extra space, you can use a negative margin:
     margin-top: -5px;
  */
}

<div class="container">
  <div id="case1"></div>
  <div id="case2"></div>
  <div id="case3"></div>
  <div id="case4"></div>
  <div id="case5"></div>
</div>

Answer 2

#container {
    display: flex;
    width: 400px;
    flex-wrap: wrap;
}
#container > div {
    background: orange;
    border-radius: 4px;
    width: 100px;
}
 #case1 {
     height: 20px;
     margin-top: 0;
}
 #case2 {
     height: 20px;
     margin-top: 0;
}
 #case3 {
     height: 20px;
     margin-top: 10px;
}
 #case4 {
     height: 20px;
     margin-top: 10px;
}
 #case5 {
     height: 190px;
     margin-top: 25px;
}

<div id="container">
<div id="case1">1</div>
<div id="case2">2</div>
<div id="case3">3</div>
<div id="case4">4</div>
<div id="case5">5</div>
</div>