Question

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

enter image description here

我想伸出较小的列以匹配较高的列。这可能吗？我尝试过使用一些javascript的解决方案，但对解决方案并不满意。有一些复杂性，行数最多的列可能不是最高的。如果它们具有不同的内容量，那么这些框也可能是不同的高度。

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

Answer 1

我认为你在这里坚持使用JS。我的方法是在列表中的元素上使用percent-height。

确定每个列表中的元素数量。
将该值除以100（好吧，如果是3,6等等，则很棘手）
以％
不要忘记在父元素上设置高度，或者％不工作

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

Fiddle

Answer 3

这是一个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 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

不幸的是，要取得成功并不容易...... 试试这个：faux columns

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

这两个列的高度都是这样的。较短列中的项目不会拉伸以填充空白。我认为你必须自己使用Javascript。

Answer 7

可能这可以工作

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

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

7 个答案: