jquery - 如何设置一个 div 的高度等于那个 div 的宽度?

标签 jquery css twitter-bootstrap

<分区>

我想将每个 div 的高度设置为等于该 div 的宽度。

<div class="container-fluid">
    <div class="row box-row">
        <div class="col-xs-6 col-md-4 box-container"></div>
        <div class="col-xs-6 col-md-4 box-container"></div>
        <div class="col-xs-12 col-md-4 box-container"></div>
        <div class="col-xs-12 col-sm-6 col-md-4 box-container"></div>
    </div>
</div>

我已经尝试使用 $('.box-container').css('height', $('.box-container').width());,但这设置了所有div 的高度等于第一个 div 的宽度。

有什么建议吗?

最佳答案

您可以使用 jQuery height() 方法的函数参数:

$('.box-container').height(function(){
    return $(this).width();
});

关于jquery - 如何设置一个 div 的高度等于那个 div 的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30139622/

上一篇:html - 在容器 div 而不是子 div 上应用过滤器

下一篇:javascript - 如何创建一个单击时改变视觉效果的按钮?

相关文章:

javascript - 自动填充动态字段的 ajax 响应

javascript - 当我按下按钮时,如何运行这个解析远程 json 的函数?

css - 使 child 的 parent (未知)背景颜色变亮

css - 如何在其相邻的 div 完成调整大小时调整一个 div 的大小?

html - 模板应在同一个 div 中更改

javascript - 如何让函数在 JS 循环开始之前运行并完成

javascript - 为什么我的第 n 个子选择器选择了错误的元素?

javascript - 如何在 marrionete.js 中构建调用链渲染 itemView,并使用 itemView 内的异步函数进行延迟

javascript - iFrame 元素未在容器内调整大小的问题

javascript - 当您通过 Tab 键浏览时,Bootstrap Datepicker 日历不会隐藏