使用zurb基础网格设置高度

铁砂

我正在使用zurb基础。

如果将两个网格水平放置,是否可以将两个网格的高度设置为相同。如果它们是垂直排列的,我想设置不同的高度。

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

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

我该怎么做?

查尔斯·巴特勒

最好的方法是使用简单的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类具有相等的高度列。基于最高的列高度:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Zurb 基础柔性网格问题

来自分类Dev

zurb基础模块网格和均衡器

来自分类Dev

Tkinter - 使用网格管理器设置高度

来自分类Dev

设置高度的建筑网格

来自分类Dev

如何在DataTemplate中设置网格的高度

来自分类Dev

根据内容大小设置网格高度

来自分类Dev

sass错误使用!global变量标志编译zurb基础

来自分类Dev

Zurb Foundation 6使用网格-列-行混合

来自分类Dev

无法在基础中为块网格设置叠加div

来自分类Dev

使用CSS设置线条的高度和高度

来自分类Dev

Zurb基础桌条纹造型

来自分类Dev

ZURB基础和行倒塌

来自分类Dev

ZURB基础和行倒塌

来自分类Dev

Zurb基础均衡器

来自分类Dev

设置Kendo UI网格高度的包装器的100%

来自分类Dev

高度设置为100%时显示整页的网格

来自分类Dev

如何使用%设置溢出高度?

来自分类Dev

带清除的Zurb块网格

来自分类Dev

KendoUI-使用基础模型从网格单元读取编辑的数据

来自分类Dev

使用带有ZURB基础数据交换的jquery延迟加载插件

来自分类Dev

使用zurb基础基于表单的其他元素启用/禁用提交按钮

来自分类Dev

在为网站使用Zurb Foundation时如何安全设置样式?

来自分类Dev

如何使用Foundation 5 Zurb设置输入元素的宽度

来自分类Dev

基础文本网格

来自分类Dev

使用zurb Foundation 4网格系统设计列表元素

来自分类Dev

使用zurb Foundation 4网格系统设计列表元素

来自分类Dev

柱之间的Zurb基础裕度

来自分类Dev

zurb基础与Angular JS兼容吗?

来自分类Dev

在网格模板行中使用自动填充或自动拟合:repeat(auto-fill,200px)仅设置第一行的高度-这是为什么?