箭头对齐问题

Question

Issue image

我有一个包含8个部分的div，这些部分是动态生成的。由于尺寸，只有5个将连续显示。所以我的问题是箭头在各个部分正下方正确显示的第一行，而对于其余部分，箭头不会到达第二行，它在第一行中移出div宽度。 div的总宽度为675px;每节宽度为120px。有时行可能超过2行。期待一个共同的解决方案。

代码：

<div class="arrow"></div>

$scope.showData = function (item, index) {      
    var indexno = index;
    var leftpos = (indexno * 120);
    $('.' + item).addClass('active').removeClass('hide').removeClass('ng-hide');
    $('.' + item).siblings('.handset_view').removeClass('active').addClass('hide');
    $('.' + item).parent().siblings('.arrow').css('left', leftpos);
}

附上图片。我选择了Galaxy J3（2016）并且箭头不在所选项目下方，而是显示在div之外。