Javascript 我的jQuery匹配高度问题

我的jQuery匹配高度有问题。。。或者我只是不完全理解？有什么帮助吗

图1：这就是它在没有高度匹配的情况下的外观，我很高兴看到一些简单的阴影框。但它们的高度并不匹配：/

图2：当我尝试应用匹配高度的jQuery时，当前的情况就是这样。阴影框顶部很小，它将内容推到下方

HTML:

CSS:

有什么想法吗？？谢谢

---

另外：我怎样才能使高度只在大屏幕上匹配，而在中屏幕和小屏幕上不受影响？

您是否考虑过只使用CSS解决方案

您可以将列包装在容器中，让我们将div与容器类一起使用。将此容器设为flexbox容器，其中的子div将与高度匹配

.container {
  display: flex;
}

我更喜欢使用CSS来解决这类问题，因为它更像是一种表现形式，而且这种方法不需要编写任何凌乱的javascript来操作DOM。此外，除非您需要支持旧版本的IE，否则flexbox的浏览器支持相当不错

我用一个列类为子div添加了一个边框，以说明它们的高度确实相同

---

这是一个很好的参考，以防你有兴趣阅读更多。

为什么第一个

div

循环

只需第二个循环就可以实现您想要的功能

var highestBox = 0;

$('.home-card').each(function(){
    if($(this).height() > highestBox) {
        highestBox = $(this).height();
    }
});
$('.home-card').height(highestBox);

因为如果有另一个

div

没有

。主卡

子卡。。。像一个页脚…

highestBox

设置为0。
然后将所有

.homecard

设置为零

---

实际上，您看到的高度可能是内部元素的边距/填充。。。或者别的什么。

嗨，尤洛亚！是的，这样做了，它看起来和原来的“图片1”一样。不知道为什么，也许它干扰了我的CSS响应网格？@covert_supaman我听到了。。。在这种情况下，您可以定义单独的CSS规则，这些规则将有效地撤消我们先前使用媒体查询应用的flex规则。在这里阅读更多关于它们的信息：我们的想法是定义一个“移动”断点，让我们选择一个任意宽度的320px。在移动设备上，或者在浏览器宽度这样做会固定框高度的任何地方？我不明白？我目前有一个响应网格和我的导航栏变化的小窗口和屏幕。。。除非那是你想告诉我的？谢谢回复！嗯，我明白你的意思，但是按照你说的做仍然会给我同样的结果。谢谢你的影子。。。它是应用于

.home card

还是

.column

？它看起来像是应用在一个内部没有任何内容的元素上。。。或者内部内容溢出。我在

内部嵌套了

，在

内部嵌套了

和

。阴影就在家里的卡片上。我可以从你的帖子上看到。。。但是你把CSS

框阴影应用在哪一个上：XXpx XXpx XXpx#color

？刚刚用包含框阴影的类“home card”的CSS更新了我的原始帖子。谢谢

    .home-card {
    box-shadow: 1px 0 11px rgba(33,33,33, 0.2);
    padding: 5px;
    margin-top: 6px;
    width: 97%;
    float: none;
    position: relative;
    left: 0.5%;
}
.home-card:hover {
    box-shadow: 1px 0 11px rgba(33,33,33, 0.4);
}
.home-card p, h2 {
    padding: 10px;
}

.container {
  display: flex;
}

var highestBox = 0;

$('.home-card').each(function(){
    if($(this).height() > highestBox) {
        highestBox = $(this).height();
    }
});
$('.home-card').height(highestBox);