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

Question

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

我想拉伸较小的柱子以匹配较高的柱子。这可能吗？我尝试了一些 javascript 的解决方案，但对解决方案并不满意。有一些复杂性在于行数最多的列可能不是最高的。此外，如果盒子有不同的内容量，它们的高度也可能不同。

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

Answer 1

这是一个 jQuery 解决方案：http: //jsfiddle.net/hunter/sG39d/

当您添加顶部/底部边距和填充时，事情会变得有点棘手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);
    });
});​

Answer 2

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

我的解决方案将考虑元素的关系大小并按比例拉伸它们。例如：一个占据了 50% 空间的 div 在拉伸 ul 后仍然会占据 50%。

（但是在添加填充和边框时会出现问题。如果有解决方案，我也会感兴趣！）

JS：

$(function() {
    var $allUl = $('ul');
    setNewPercentages($allUl);

    function getTallestUl($uls) {
        var max = 0;
        var $ulTallest;

        $uls.each(function(i,e) {
            console.log( $(this).height() > max);
            if( $(this).height() > max) {
                $ulTallest = $(this);
                max = $(this).height();
            }
        });

        return $ulTallest;
    };

    function adjustPercentages($ul) {
        $ul.find('li').each( function(i,e) {
            var $this = $(this)
            ,   ulHeight = $ul.height()
            ,   liHeight = $this.height()
            ,   percentage = (liHeight / ulHeight * 100);

            $this.css('height', percentage + '%');
        });
    };

    function setNewPercentages($uls) {
        var $tallest = getTallestUl($allUl).addClass('tallest');
        var heightTallest = $tallest.height();

        $uls.not('.tallest').each(function(i,e) {
            adjustPercentages($(this));
            $(this).css('height', heightTallest);
        });
    };
});​

小提琴

Answer 3

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

• 确定每个列表中的元素数。
• 将 100 除以该值（好吧，如果是 3、6 ... 等，则很棘手）
• 以 % 为每个元素指定其高度
• 不要忘记在父元素上设置高度，否则 % 将不起作用

Answer 4

根据您的小提琴：

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);
    });
}

Answer 5

不幸的是，归档并不容易......试试这个： 人造列

Answer 6

可能这行得通

<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>

Answer 7

这个怎么样：

<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>

这样，两列将具有相同的高度。但是，较短列中的项目不会拉伸以填补空白。我认为你必须自己用Javascript来做。