javascript - 为 div 分配相同的高度(响应式)

标签 javascript jquery

我有几个 div,如果屏幕尺寸超过某个宽度,它们应该具有相同的高度

我认为使用类 .sameheight 作为选择器来创建“全局工作函数”是个好主意。接下来我将分配另一个类来配对 div,它应该具有相同的高度,如下所示:

.sameheight-01
.sameheight-01
.sameheight-02
.sameheight-02  
.sameheight-02

我有几个问题阻止我编写自己的脚本,因为我没有足够的 javascript/jQuery 技能:

How can I make it a responsive function, not just set the height once after loading (using window.resize)?

How can I target .sameheight and search for other classes, without writing the same line multiple times (.hasClass(sameheight-01).hasClass(sameheight-02), etc.)?

How can I make this scalable? (Imagen I have twenty groups with ten different media queries)

我创建了一个 JS Fiddle Demo来说明我的问题。

最佳答案

你要支持多久? 因为这可以使用 display:flex; 来解决;

.row-sameheight {
   display: flex;
   display: -webkit-flex;
   display: -moz-box;
   width: 100%;
}

这是一个 JS Fiddle

关于javascript - 为 div 分配相同的高度(响应式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33997140/

相关文章:

JavaScript 或 Notepad++ 正则表达式向任意文本添加千位分隔符

javascript - 如何用 jQuery 替换 document.getElementById ('file-uploader' )?

javascript - 按索引切换单词

javascript - 如何在 Javascript 函数中动态传递字符串

javascript - jquery:退出函数

javascript - 使用 jQuery(或 Javascript)将状态更改动画化为 'disabled'

javascript - 顶部栏正文位置太低的 html

javascript - 如何使用 jQuery 删除动态添加的行

javascript - 解析 400 错误请求 setACL

Javascript 前导零函数参数