基础5网格列高度

时间:2014-03-29 16:46:53

标签: zurb-foundation

Foundation 5提供网格系统,我想用它来安排我的网页。但问题是我不知道如何设置每列的高度。现在它和内容需要一样大,但它真的很难看。

我已经尝试过解决方案Set height with zurb-foundation grid,但它不起作用。它是一个8列的嵌套网格,分为两个6列。我只是希望这两个6列高度相同但背景颜色不同。

我的代码是:

<div class="row">
        <div class="small-8 columns"> 8 
            <div class="row" > 
                <div class="small-6 columns" id="d8">
                            more and more people want to learn some HTML and CSS.  
                </div>                      
                <div class="small-6 columns" id="d9"> 
                 more and more people want to learn some HTML and CSS. Joining the      
                 designers and programmers are new audiences who need to know 
                 a little bit of code at work (update a content management system 
                 or e-commerce store) and those who want to make their personal 
                 blogs more attractive. Many books teaching HTML and CSS are dry
                 and only written for those who want to become programmers, which 
                 is why this book takes an entirely new approach. </div>
                </div>
            </div>
        </div>
</div>

和链接中的JS是:

<script>
$(window).load(function()({

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

//call the equalize height function
equalHeight($("div.small-6"));
});
</script>

1 个答案:

答案 0 :(得分:0)

事实上,设置高度很容易。最后我用

.div[id]
{
    height:85px !important;
}

它有效。

相关问题