CSS聪明的位置？

Question

我想知道是否有办法对div进行智能排序，这就是我想做的事情。

我从json文件获取用户，有时是5，有时是4,3，有时是1 ...问题是当每一方都是5.我得到剩余的div完美，但是当他们是4或3个用户，div被拆解，我不知道如何正确排序，留下几张照片显示我发生了什么。

第二张图片显示了如果左侧仅有2 3个用户，其他div显示为＆＃34;空＆＃34;会发生什么。我希望我解释一下，如果没有，请告诉我。

div的css：

  .userTraced {
    width: 160px;
    height: 24px;
    margin-bottom: 2px;
    background-color: #DDDDDD;

  }
  .a100 {
    position: relative;
    float: left;
    clear: left;
  }
  .a200 {
    position: relative;
    float: right;
    clear: right;
    top: -104px;
  }
  .aNai {
    opacity: 0.6;
  }

＆＃34; ANAI＆＃34;风格适用于＆＃34;空＆＃34; div的。和html：

<div class="userTraced a100"> </div>
<div class="userTraced a100"> </div>
<div class="userTraced a100"> </div>
<div class="userTraced a200"> </div>
<div class="userTraced a200"> </div>
<div class="userTraced a200"> </div>
<div class="userTraced a100 aNai"> </div>
<div class="userTraced a100 aNai"> </div>
<div class="userTraced a200 aNai"> </div>
<div class="userTraced a200 aNai"> </div>

总共有10个div。

这就是我在做什么来获取数据

if (!empty($recentFall[$thisGame]->fellowPlayers->array[0]->summonerId)){

  $player_1_Name = $players_ES[array_search($recentFall[$thisGame]->fellowPlayers->array[0]->summonerId, $players_ids)];

//----->
if ($recentFall[$thisGame]->fellowPlayers->array[0]->teamId == "100"){
    $addTeam100++; 
    $addClass_1 = "";
    $checkBlue++;
}else{
    $addTeam200++;
    $addClass_1 = "";
}
//----->

} else {
$player_1_Name = "Vacio / BOT";

//----->
if ($addTeam100 < 5) {
    $addClass_1 = "a100";
    $addTeam100++; 
}else{
    $addClass_1 = "a200";
    $addTeam200++; 
}
//----->
}