Matija Matija - 1 year ago 106
Sass (Sass) Question

positioning elements using css

Let's say I have this code.

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


Ok, so I have 4 red squares on green surface, the first square (
) is 200px from left side of surface, and all of them are 100px from top of surface. How I can make 3 other squares positioned next to their previous sibling (
- 250px from left,
- 300px from left,
- 350px from left), without positioning every square separately. Because that is not problem when I have 4 squares, but when I have 100 of them, that is a problem. Is there a way of doing that using Sass or something like that, maybe JavaScript?

Answer Source

You can do something like this. using css: flexbox.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download