Position div(s) 上下

Question

我想 position 像这样的一系列 div，我不能 position 每个单独。 有没有办法一次为所有的 div 做这件事。 请帮助我

Answer 1

使用 CSS nth-child(odd)到 select 奇数元素

 .container { display: flex; }.child { border: 2px solid blue; margin: 5px; width: 50px; height: 80px; }.child:nth-child(odd) { margin-top: 40px; }

 <div class="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

Answer 2

是的，您可以使用 class 来做到这一点。 让我们来看看

在父 class 中使用 dispaly dispaly: flex 。 然后在子 class 中使用align-self: start或align-self: end 。 在此处阅读有关 align-self 的更多信息

 .container{ display: flex; height: 120px; }.box{ height: 70px; width: 40px; border: 1px solid blue; margin: 0 3px; }.up{ align-self: start; }.down{ align-self: end; }

 <div class="container"> <div class="box up"></div> <div class="box down"></div> <div class="box up"></div> <div class="box down"></div> <div class="box up"></div> <div class="box down"></div> <div class="box up"></div> <div class="box down"></div> </div>

Answer 3

// try this one this will work


  enter code here
container{
  display: flex;
  height: 120px;
}

.box{
  height: 70px;
  width: 40px;
  border: 1px solid blue;
  margin: 0 3px;
}

.up{
  align-self: start;
}

.down{
  align-self: end;
}


<div class="container">
  <div class="box up"></div>
  <div class="box down"></div> 
  <div class="box up"></div> 
  <div class="box down"></div> 
  <div class="box up"></div> 
  <div class="box down"></div> 
  <div class="box up"></div> 
  <div class="box down"></div> 
</div>