Question

假设我有这段代码。

<div class="big_div" >
  <div class="small_div" id="small_div_1" ></div>
  <div class="small_div" id="small_div_2" ></div>
  <div class="small_div" id="small_div_3" ></div>
  <div class="small_div" id="small_div_4" ></div>
</div>

.big_div{
  width:1000px;
  height:1000px;
  background-color:green;
}
.small_div{
  width:50px;
  height:50px;
  position:absolute;
  top:100px;
  background-color:red;
}
#small_div_1{
  left:200px;
}

好的，所以我在绿色表面上有4个红色正方形，第一个正方形（#small_div_1）距离表面左侧200px，并且所有这些都是距离表面顶部100px。如何将3个其他方块放置在其上一个兄弟（#small_div_2 - 左侧250px，#small_div_3 - 左侧300px，#small_div_4 - 左侧350px）旁边，而不是单独定位每个方格。因为当我有4个方格时这不是问题，但是当我有100个方格时，这是一个问题。有没有办法使用Sass或类似的东西，也许是JavaScript？

Answer 1

你可以这样做。使用css：flexbox。

＆＃13;

.big_div {
  width: 1000px;
  height: 1000px;
  display: flex;
  background-color: green;
  direction: column;
  justify-content: space-around;
}
.small_div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-top: 100px;
  border: 1px solid black;
}

＆＃13;

<div class="big_div">
  <div class="small_div" id="small_div_1"></div>
  <div class="small_div" id="small_div_2"></div>
  <div class="small_div" id="small_div_3"></div>
  <div class="small_div" id="small_div_4"></div>
  <div class="small_div" id="small_div_5"></div>
  <div class="small_div" id="small_div_6"></div>
</div>

＆＃13;

Answer 2

我认为有更多漂亮的解决方案，但你也可以用sass做到这一点：

@for $i from 2 through 4 {
  &__layout:nth-child(#{$i}) {
    transition: transform 0.4s ease #{$i - 1}s;
  }
}

使用css定位元素

2 个答案: