Question

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

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

我试图将函数放入resize函数，但是不重新激活。我不确定我做错了什么。

我是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

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

1 个答案: