1

我正在使用zurb-foundation。

有没有办法设置两个网格相同的高度，如果它们是水平排列的。如果它们是垂直排列的，我想设置不同的高度。

<div class="row">
<div id="left" class="large-4 columns">
<div id="right" class="large-8 columns">
</div>

例如，如果“左”网格的高度为 400 像素，“右”网格的高度为 300 像素，我想将右网格设置为 400 像素，只要它们是水平的。但是在像智能手机这样的小型显示器中，它们是垂直排列的。在这种情况下，我想设置“正确的”网格原始高度（300px）。

我该怎么做？

4

2 回答 2

4

最好的方法是使用简单的 JS 补救措施。我已经使用 Foundation 多年了，这是我的故障安全代码。

<script>
$(window).load(function() {
    //call the equalize height function
    equalHeight($("div.small-item"));

    //equalize function
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
});
</script>

这将为“小项目”的所有 div 类提供一个等高的列。基于最高的列高度：

于 2013-11-16T12:00:34.923 回答
0

媒体查询将用于决定在断点 768px 之间采取什么行动。如果您希望保持两个水平 div 的高度相同，无论两者的内容如何，​​甚至在您调整窗口大小时 - 您可能会导致任一侧的内容增长不均等 - 您可能需要使用 javascript

我在我的网站中使用了一个，它非常简单，可能并不完全安全，但这是我的解决方案：

$(window).resize(function () {
  var leftblock = $('#left');
  var rightblock = $('#right');
  leftblock.height('auto');
  rightblock.height('auto');
  if ($(window).width() > 767)
  {
    var maxHeight = Math.max(leftblock.height(), rightblock.height());
    leftblock.height(maxHeight);
    rightblock.height(maxHeight);
  }
});

每当调整窗口大小或加载时，它将高度重置为自动，如果窗口宽度超过 768 断点，它将两个高度设置为两者中的较大者

于 2013-08-17T13:39:41.787 回答