用zurb基础网格设置高度

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

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

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

我该怎么办？

来源

2013-07-18 ironsand

为什么不使用媒体查询和CSS来根据浏览器宽度设置高度。有一些如何在基础文档站点上执行此操作的示例。 – JAMESSTONEco

谢谢！我不知道媒体查询。 – ironsand

最好的方法是使用简单的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-16 12:00:34

媒体查询将用于决定在断点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-17 13:39:41 Nicholas

用zurb基础网格设置高度

回答

相关问题