【问题标题】:Foundation5 grid column heightFoundation5格柱高
【发布时间】:2014-04-05 01:41:39
【问题描述】:

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>

【问题讨论】:

    标签: zurb-foundation


    【解决方案1】:

    其实设置高度很容易。最后我用了

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

    它有效。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多