How to align divs side-by-side

Question

How to align divs side-by-side

Navigation

#1 by (2 votes)

1

I've tried everything I've done and left these div aligned, on the desktop they are perfect, every line has 4 div visualizing the computer, now in the android was to show 3 div by lines, but it did not work very well, and the code and the same one used for desktop, I just changed the display number to 3

<divclass="cartaz">
<ul>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
</ul>
</div>

desktop

.cartaz{
   float: left;
   margin: 0% 2% 0% 0%;
   padding: 0% 0% 2% 0%;
   width: 78%;
   border-bottom: 1px solid #ebebeb;
}
li .mini-box{
  float: left;
  margin: 0% 2% 0% 0%;
  width: 23.5%;
  height: 230px;
  background-color: #4DAE52;
  border-radius: 3px;
}
li:nth-child(-n+4) .mini-box{
  margin: 0 2% 0 0;
}
li:nth-child(4n) .mini-box{
  margin: 0 0 2% 0;
}
li:last-child .mini-box{margin: 0%;}

android

@media only screen and (max-width: 360px){
  li .mini-box{
    margin: 0 2% 0 0;
    width: 31.9%;
    background-color: purple
  }
  li:nth-child(-n+3) .mini-box{
    margin: 0 2% 0 0;
    background-color: orange
  }
  li:nth-child(3n) .mini-box{
    margin: 0 0 2% 0;
    background-color: gray
  }
  li:last-child .mini-box{margin: 0%;background-color: red}
}

css

asked by anonymous 04.11.2018 / 23:05

1 answer

Read a string from a file with space How to check if the vector of a record is empty in C

score 2 · Accepted Answer

Change the li .mini-box rule by li:nth-child(n) .mini-box to @media because it has more force than the li:nth-child(4n) .mini-box rule that is setting the right margin of some elements outside @media . The (n) will apply the properties to all elements of the selector.

I've increased the breakpoint from 360px to 660px to exemplify and power view here.

ul, li{
   padding: 0;
   margin: 0;
   list-style: none
}

li .mini-box{
  float: left;
  margin: 0% 2% 0% 0%;
  width: 23.5%;
  height: 230px;
  background-color: #4DAE52;
  border-radius: 3px;
}
li:nth-child(-n+4) .mini-box{
  margin: 0 2% 0 0;
}
li:nth-child(4n) .mini-box{
  margin: 0 0 2% 0;
}
li:last-child .mini-box{margin: 0%;}


@media only screen and (max-width: 660px){
  li:nth-child(n) .mini-box{
    margin: 0 2% 0 0;
    width: 31.9%;
    background-color: purple
  }
  li:nth-child(-n+3) .mini-box{
    /* margin: 0 2% 0 0; removido */
    background-color: orange
  }

  li:nth-child(3n) .mini-box{
    margin: 0 0 2% 0;
    background-color: gray
  }
  li:last-child .mini-box{margin: 0;background-color: red}

}

<ul>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>

    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
    <li><a href=""><div class="mini-box"></div></a></li>
</ul>