Javascript 两列不同项目数相同的总高度

我正在寻找某种方法，以html和css显示这种类型的网格

我想把较小的柱子伸出来，与较高的柱子相配。这可能吗？我尝试了一些javascript的解决方案，但我对这个解决方案并不满意。行数最多的列可能不是最高的列，这有一些复杂性。如果盒子的内容量不同，盒子的高度也可能不同

---

我对这里要使用的标记持开放态度，目前我正在并排使用两个列表，但是一个表或其他任何东西都可以。然而，仅仅使用rowspan似乎不起作用，因为这只会产生一个比其他框大得多的框。这似乎是一个常见的问题，有好的解决方案吗？

不幸的是，归档不容易。。。

---

试试这个：

不幸的是，归档不容易。。。

---

试试这个：

我想你被JS困住了。我的方法是在列表中的元素上使用百分比高度

• 确定每个列表中的元素数
• 将100除以该值（好的，如果是3，6…，等等）
• 以%表示每个元素的高度
• 不要忘记在父元素上设置高度，否则%将不起作用

---

我想你被JS困住了。我的方法是在列表中的元素上使用百分比高度

• 确定每个列表中的元素数
• 将100除以该值（好的，如果是3，6…，等等）
• 以%表示每个元素的高度
• 不要忘记在父元素上设置高度，否则%将不起作用
这个怎么样：

<table>
  <tr>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
    </td>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
      <div>Item4</div>
      <div>Item5</div>
    </td>
  </tr>
</table>

项目1
项目2
项目3
项目1
项目2
项目3
项目4
项目5

这样，两列的高度将相同。不过，较短列中的项目不会拉伸以填补空白。我想你必须自己用Javascript来做这件事。
这个怎么样：

<table>
  <tr>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
    </td>
    <td>
      <div>Item1</div>
      <div>Item2</div>
      <div>Item3</div>
      <div>Item4</div>
      <div>Item5</div>
    </td>
  </tr>
</table>

项目1
项目2
项目3
项目1
项目2
项目3
项目4
项目5

---

这样，两列的高度将相同。不过，较短列中的项目不会拉伸以填补空白。我想你必须自己用Javascript来做这件事。
花了我一段时间，但这里是小提琴和JS代码：

我的解决方案将考虑元素的关系大小，并按比例拉伸它们。例如：占据50%空间的div在完成ul后仍将占据50%
（但是在添加填充和边框时会出现问题。如果有解决方案，我也会感兴趣！）
JS:

---

我花了一段时间，但这是小提琴和JS代码：

我的解决方案将考虑元素的关系大小，并按比例拉伸它们。例如：占据50%空间的div在完成ul后仍将占据50%
（但是在添加填充和边框时会出现问题。如果有解决方案，我也会感兴趣！）
JS:

---

这里有一个jQuery解决方案：
当您在

li

$(function() {
    var $tallest = null;
    var $ul = $("ul");

    $("ul").each(function() {
        if ($tallest == null || $(this).height() > $tallest.height()) {
            $tallest = $(this);
        }
    });
    var height = $tallest.height();
    $ul.not($tallest).each(function() {
        var update = height / $(this).find("li").length;
        $(this).find("li").css("height", update);
    });
});​

---

下面是一个jQuery解决方案：
当您在

li

$(function() {
    var $tallest = null;
    var $ul = $("ul");

    $("ul").each(function() {
        if ($tallest == null || $(this).height() > $tallest.height()) {
            $tallest = $(this);
        }
    });
    var height = $tallest.height();
    $ul.not($tallest).each(function() {
        var update = height / $(this).find("li").length;
        $(this).find("li").css("height", update);
    });
});​

---

根据你的小提琴：

var heights=[], cnt=0, cols=[];

$('ul').each(function () {
    cols.push(this);
    var h = 0;
    $(this).find('li').each(function() {
        h += $(this).innerHeight();
    });
    heights.push(h);
    cnt++;
});

var max = Math.max.apply(null, heights);

for(var i=0; i<cols.length; i++) {
    var delta = Math.floor((max - heights[i]) / $(cols[i]).find('li').length);
    $(cols[i]).find('li').each(function() {
        $(this).css('height', $(this).innerHeight() + delta);
    });
}

var heights=[]，cnt=0，cols=[]；
$（'ul'）。每个（函数（）{
cols.推（这个）；
var h=0；
$（this）.find（'li'）.each（function（）{
h+=$（此）.innerHeight（）；
});
高度。推（h）；
cnt++；
});
var max=Math.max.apply（空，高度）；
对于（var i=0；i基于您的小提琴：

var heights=[], cnt=0, cols=[];

$('ul').each(function () {
    cols.push(this);
    var h = 0;
    $(this).find('li').each(function() {
        h += $(this).innerHeight();
    });
    heights.push(h);
    cnt++;
});

var max = Math.max.apply(null, heights);

for(var i=0; i<cols.length; i++) {
    var delta = Math.floor((max - heights[i]) / $(cols[i]).find('li').length);
    $(cols[i]).find('li').each(function() {
        $(this).css('height', $(this).innerHeight() + delta);
    });
}

var heights=[]，cnt=0，cols=[]；
$（'ul'）。每个（函数（）{
cols.推（这个）；
var h=0；
$（this）.find（'li'）.each（function（）{
h+=$（此）.innerHeight（）；
});
高度。推（h）；
cnt++；
});
var max=Math.max.apply（空，高度）；
对于（var i=0；i可能是这样），这是可行的

<table border="1" >
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>


数据
数据
数据
数据
数据
数据
数据
数据
数据
可能是这样，这样就可以工作了

<table border="1" >
<tr>
<td>
<table border="0">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
<td>
<table border="0" cellpadding="5">
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</td>
</tr>
</table>


数据
数据
数据
数据
数据
数据
数据
数据
数据
忘了包括这个小提琴，我试过的小提琴看起来很像砖石布局。你试过了吗？谢谢你的答案，我将嵌套表标记为答案，因为它很容易理解，我真的不知道什么是最好的javascript解决方案。Nirazul和yent答案不会切断任何文本，而hunter的答案确实如此，但写得很好，所以很有帮助。不过忘了包括这个小提琴，我试过的小提琴看起来很像砖石布局。你试过了吗？谢谢你的答案，我将嵌套表标记为答案，因为它很容易理解，我真的不知道什么是最好的javascript解决方案。Nirazul和yent的答案不会删掉任何文字，而hunter的答案会删掉任何文字，但写得很好，因此仍然很有帮助