我的网站有 2 个容器,每个容器都有一堆相关的内容。将什么内容放入什么容器的组织很重要,但不如容器在高度上尽可能接近那么重要。
代码:
<button>Click to add more boxes</button>
<div id="wrapper" align="center">
<div id="container1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="container2">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Jsfiddle
问题:
添加更多项目后,您会看到,只是有时一个容器的内容会明显多于另一个容器,但这种情况确实会发生。
当发生这种情况时,我想把剩下的元素放在较大的容器中,并以一种使每个容器的高度尽可能接近的方式将它们分配到容器中。
我该怎么做呢?
最佳答案
有一个标准算法子集和问题
可以解决这个问题。
问题说
You have n integers. Divide n integers into two sets such that |Set1| - |Set2| is minimum. where |Set(i)| represents the sum of elements in ith set.
我看到你这里也有类似的问题。假设您的容器是两组,每个盒子的高度是一个整数,将被放入该组中。问题是我们必须以两个容器的高度保持最小的方式划分整数(框)。
相关链接:
Geeks for Geeks tutorial - 好一个
关于javascript - 按容器高度组织容器内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17246453/