Position div(s) up and down

Question

I want to position a series of divs like this and I can't position each of them seperately. Is there any way to do it for all the divs at once. Plz Help ME

Answer 1

Use CSS nth-child(odd) to select the odd elements

 .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

Yes, you can do this by using class. Let's see

Use dispaly: flex in the parent class. Then use align-self: start or align-self: end in the child class. Read more about align-self 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>

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>