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");
});

...结果 enter image description here

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

这两个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");
});

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

1 个答案: