2

对你来说有点谜......

我有一个 730px 宽的自动高度 div。在这里面我有一些较小的 div 164px X 261px。

这些将被动态拉入模板，因此我可以有 1 个，或者我可以有 18 个，或者为了这个练习，我可以有 1000 个或介于两者之间的任何值。

我需要将它们分开，以便在每条线上，每条线之间的距离相等。很简单，如果我们最多处理 4 个，我可以执行以下操作：

var totalWidth = $('.bigDiv .smallerDivs').length * $('.bigDiv .smallerDivs').width();
var margin = ($('.bigDiv').width - totalWidth) / ($('.bigDiv .smallerDivs').length * 2);
$('.bigDiv .smallerDivs').css('margin-left': margin , 'margin-right': margin);

但是，当有 5 个时。我希望顶行有 3 个，底部有 2 个。或者如果我有 7 个，我希望 4 在顶部 3 在底部。如果有 11 个，我希望顶部有 4 个，中间有 4 个，下面有 3 个等等，等等，每行根据有多少小盒子都很好地证明了这一点。

任何人都可以建议我可以解决这个问题的一个很好的干净方式吗？

在此处输入图像描述

4

1 回答 1

1

我的回答基本上是基于在这篇文章的回答中找到的逻辑。

总体概念是，您可以评估 div 的数量可以被多少，然后将一个类附加到较大的 div，您可以使用它来分隔内部 div。

$(document).ready(function(){
  function nos_div_eval(val,container,inner){
    var nosDivs = $(inner).length;
     for(var i=val; i>1; i--){
      if (nosDivs % i === 0) {
        $(container).addClass('div_by_' + i);
        break;
      } else {
       $(container).addClass('prime');
      }  
     }
   }

   nos_div_eval(10, '.bigDiv', '.smallerDivs');

});​

.div_by_3这将评估小 div 的数量，并查看它是否可以被 2 到 10 之间的任何数字整除。如果匹配，它会在external中添加一个类<div>。它将基于 2 到 10 之间的最大数添加一个类，它可以被整除。这样你就可以像这样设置你的样式：

.bigDiv.div_by_3 .smallerDivs {
   margin-right: 40px;
 }

 .bigDiv.div_by_4 .smallerDivs {
   margin-right: 20px;
  }

您可以调整边距金额，以便让 div 分成您想要的行。

但是，如果较小的 div 的数量不能被 2 到 10 之间的数字整除，则此函数将添加一个名为“prime”的类，因为它很可能是质数。您可以为这些 div 添加一些任意边距值并接受发生的情况。

如果你真的想覆盖你的基础，你可以改变“i”的初始值 - 你可以将它设置为 31，这是平方小于 1000 的最大数字。我只是认为这会使 for 循环真正长。

这个小提琴演示了逻辑，尽管我对其进行了一些简化以使其更清晰。您可以添加<div>'s 并查看新的警报值。

编辑：好的，我不能独自离开，我已经回去并用三个参数让函数自己包装起来。第一个参数是您要检查的上限值，然后是容器元素，然后是内部元素。一定要包括“#”或“。” 取决于元素是否具有 ID 或类 - 这也适用于普通的 ol' 元素。

于 2012-06-27T14:32:35.433 回答