在窗口调整大小时动态更改高度至最高div

Question

我试图使用jQuery来设置一组div到最高的div的高度。我已经得到了初始功能的工作，在那里它得到了网站，并将其应用到页面上的div的其余部分。

我也试图重新计算div的高度在调整大小。在JSfiddle中，您可以看到，当您缩小卡片/div时，文本会展开。

我已经尝试将该函数放入调整大小函数中，但是它没有重新启动。我不知道我做错了什么。

我是一个JS初学者，抱歉。

HTML

    <div class="fluid-container grey-bg">
        <div class="container">
            <div class="card-default width-25 items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque hic aliquid ea id, perferendis mollitia nam consequatur, ut rerum animi nisi iste, quae provident atque placeat repudiandae impedit delectus sequi.
                </div>
            </div>
            <div class="card-default width-25 spacer items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ex sed voluptatum rem iste 
                </div>
            </div>
            <div class="card-default width-25 spacer items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis omnis, quos id quaerat magni nobis blanditiis, esse magnam provident cupiditate harum non! Modi cupiditate earum eos repudiandae impedit nemo repellendus!
                </div>
            </div>
            <div class="card-default width-25 items">
                <div class="content">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laboriosam magni placeat numquam 
                </div>
            </div>
        </div>
    </div>

CSS

.card-default {
     background-color: #fff;
     border-radius: 10px;
     color: #333333;
     min-height: 100px;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
     padding: 20px 0px;
     text-align: center;
     margin-bottom: 20px;
     display: block;
     float: left;
     position: relative;
     width: 100%;
}
.card-default.width-25 {
     width: 23%;
     margin-left: 0px;
     margin-right: 0px;
     padding: 20px 20px;
}

JS

function cardEqualHeight() {
    var maxHeight = -1;
    $('.items').each(function() {
        maxHeight = maxHeight >= $(this).height() ? maxHeight : $(this).height();
    });
    $('.items .content').each(function() {
        $(this).height(maxHeight);
    });
}
cardEqualHeight();

https://jsfiddle.net/k3lh4m/7wmfox9m/

Answer 1

将此添加到containter类中，不要使用JS函数，然后就可以了!

.container {
    display: flex;
    flex-wrap: wrap;
}

jsfiddle