css - 如何并排对齐div

Question

我已经尝试了所有让这些 div 对齐的方法，在桌面上它们是完美的，每行都有 4 个 div 可视化计算机，现在在 android 中是按行显示 3 个 div，但它没有工作得很好，代码和桌面使用的相同，我只是将显示数字更改为 3

<div class="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>

CSS 桌面

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

CSS 安卓

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

Answer 1

您可以像下面这样减少代码:

ul {
 list-style:none;
}

.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(4n) .mini-box {
  margin: 0 0 2% 0;
}

li:last-child .mini-box {
  margin: 0%;
}

@media only screen and (max-width: 800px) {
   /*reset the style to avoid issue*/
   li:nth-child(4n) .mini-box {   
     margin: 0 2% 0 0;
   }
   /**/
  li .mini-box {
    width: 31.9%;
    background-color: purple
  }
  li:nth-child(3n) .mini-box {
    margin: 0 0 2% 0;
    background-color: orange
  }
  li:last-child .mini-box {
    background-color: red
  }
}

<div class="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>