javascript - 具有相同高度的多个div，Jquery/Javascript

Question

我一直在尝试让这 3 个 div 高度相同，但我发现它相当困难。

到目前为止我已经做到了

function size() {
var height = -1;
var divs = $("div[class^='content_banner_fill']");
$(divs).each(function () {
    var absolute = $(this).height();
    if (absolute > height) height = absolute;
});
$(divs).each(function () {
    $(this).css("height", height + "px");
});

结果...

现在...我相信这与 css 偏移量(边距/填充)有关，因为 css 元素高度不包括那些但仍然没有运气。

这2个css类都是继承的

.content_banner_style {
text-align: center;
margin-top: 20px;}

.content_banner_fill {
padding-top: 20px;
background-color: rgba(202, 202, 202, 0.27);
background-color: rgb(122, 255, 0);}

<div class="content_banner_style content_text content_option_section content_group">
    <div class="content_banner_fill content_col span_1_of_3">
        <img src="res/graphics/icon-clock.png"/>
        <h4>Ease</h4>

        <p style="margin: 15px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent velit neque, ornare et
            orciat,
            vestibulum dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            rutrum vestibulum augue sit amet lacinia. Mauris pulvinar, est sed porttitor sagittis,
            libero
            odio dictum orci, quis cursus risus nunc sed est. Fusce laoreet rutrum felis, ut auctor
        </p>
    </div>
    <div class="content_banner_fill content_col span_1_of_3">
        <img src="res/graphics/icon-meter.png"/>
        <h4>Ease</h4>

        <p style="margin: 15px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent velit neque, ornare et
            orciat,
            vestibulum dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            rutrum vestibulum augue sit amet lacinia. Mauris pulvinar, est sed porttitor sagittis,
            libero
            odio dictum orci, quis cursus risus nunc sed est. Fusce laoreet rutrum felis, ut auctor
            nulla
        </p>
    </div>
    <div class="content_banner_fill content_col span_1_of_3">
        <img src="res/graphics/icon-setup.png"/>
        <h4>Ease</h4>

        <p style="margin: 15px;">
            Fanny pack seitan tote bag Truffaut. VHS aesthetic pug, tousled twee plaid raw denim XOXO
            Echo
            Park. Gastropub put a bird on it banjo, Shoreditch synth salvia small batch paleo meh.
            Mustache
            banjo Intelligentsia next level cornhole, small batch fap fingerstache Cosby sweater Austin
        </p>
    </div>
</div>

谢谢:)

Answer 1

这在语法方面写得不正确。

改变这个

$(divs).each(function () {
    var absolute = $(this).height();
    if (absolute > height) height = absolute;
});

到

$(divs).each(function () {
    var absolute = $(this).height();
    if (absolute > height) { var height = absolute; }
});

编辑，这应该可以解决您的问题，因为 padding-top 20px 似乎减少了 div 的底部。所以只需在下面的函数中添加 20 就可以让你到达你需要去的地方。如果还不够“恰到好处”，就相应调整。

$(divs).each(function () {
    $(this).css("height", height + 20 + "px");
});