使用 zurb-foundation 网格设置高度

问题描述

我正在使用 zurb-foundation.

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

<div id="left" class="large-4 列"><div id="right" class="large-8 列">

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

我该怎么做?

解决方案

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

这将为小项目"的所有 div 类提供一个等高的列.基于最高的列高度:

I'm using zurb-foundation.

Is there a way to set two grid same height, if they are horizontally arranged.And if they are vertically arranged I want to set different height.

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

For example if the "left" grid has 400px height and the "right" grid has 300px height, I want to set right grid 400px as far as they are horizontal.But in a small display like smartphone they are arranged vertically. In this case, I want to set "right" grid original height(300px).

How can I do it?

解决方案

The best way to do this is using a simple JS remedy. I have been using Foundation for years and this is my fail-safe code.

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

This will give all the div classes of "small-item" a equal height column. based on the tallest columns height:

这篇关于使用 zurb-foundation 网格设置高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！