javascript - 在窗口调整大小时动态改变高度到最高的 div

Question

我正在尝试使用 jQuery 将一组 div 设置为最高 div 的高度。我已经让初始功能正常工作，它获取网站并将其应用于页面上的其余 div。

我还试图在调整大小时重新计算 div 的高度。在 JSfiddle 中，您可以看到当您收缩时文本会扩展到 card/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

将它添加到 container 类中，不要使用你的 JS 函数就可以了!

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

}

jsfiddle