根据数量动态布局固定大小的 div

Posted 2023-02-19

【中文标题】根据数量动态布局固定大小的 div

【英文标题】：Dynamically laying out fixed size divs depending on their number

【发布时间】：2012-06-28 11:35:22

【问题描述】：

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

我有一个 730 像素宽的自动高度 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 个等等等等，根据有多少小盒子，每一行都很好地证明了这一点。

任何人都可以建议我可以解决这个问题的好方法吗？

【问题讨论】：

如果所有 div 的宽度相同，则每行不可能有超过 4 个 730/164 ~ 4...我猜你想均匀分布它们，但不要改变子 div 的实际大小?你也许可以只用 CSS 来做到这一点

如果我正确理解您的要求，我已经写了详细的答案：***.com/questions/10548417/…

没错。因此，当我有超过 4 个 div 时需要更多行

@thirtydot 这是一个不错的解决方案，但是我需要能够更灵活地分隔它们。理想的匹配是每行 4 个，但是如果我有 5 个 div，我需要能够将 3 个放在顶行，2 个放在底部。全部均匀分布（为了稍微简化，底部 2 之间的边距与顶部 3 之间的边距相同，但它们会居中）

@Fraser：一些关于不同数量元素应该发生什么的示例图像将非常有用。

【参考方案1】：

我的回答基本上是基于found in this post's answer的逻辑。

总体概念是，您可以评估 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 的数量，并查看它是否可以被 2 到 10 之间的任何数字整除。如果匹配，它会将类似 .div_by_3 的类添加到外部 <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 循环真的很长。

This fiddle 演示了逻辑，尽管我对其进行了一些简化以使其更清晰。您可以在其中添加<div> 并查看新的警报值。

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

【讨论】：

你先生，是个圣人。我现在要去办公室，所以会试一试，然后回复你。再次感谢。