Question

如果屏幕尺寸高于某个宽度，我有几个div应该具有相同的height。

我认为使用类.sameheight作为选择器创建一个＆＃34;全局工作函数＆＃34;是个好主意。接下来，我将指定另一个类来配对div，它应该具有相同的高度，如下所示：

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

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

如何使其成为响应函数，而不仅仅是在加载后设置高度（使用window.resize）？

我如何定位.sameheight并搜索其他类，而不是多次写同一行（.hasClass（sameheight-01）.hasClass（sameheight-02）等）？

如何使这个可扩展？（Imagen我有20个小组，有10个不同的媒体查询）

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

Answer 1

你需要支持多久了？因为这可以使用display：flex;

来解决

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

这里是JS Fiddle

Answer 2

这可以实现使用CSS本身

@media (min-width:500px){
    .sameheight {
        min-height:100px;
    }
}

或

如果你想通过js / jq，请参考小提琴代码的修改 http://jsfiddle.net/qj3ntsjs/11/或 http://jsfiddle.net/qj3ntsjs/17/

为div分配相同的高度（响应）

2 个答案: