Несколько div с одинаковой высотой, Jquery / Javascript

0

я пытаюсь сделать эти 3 divs одинаковой высоты, но я нахожу это довольно сложным.

Пока я это сделал

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

Результаты... Изображение 174551

Теперь... я верю, что это как-то связано с смещениями css (Margin/Padding), поскольку высота элемента 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>

Благодаря :)

  • 1
    ты сделал это внутри document.ready ?
  • 0
    Не могли бы вы предоставить как js, так и код html + css?
Показать ещё 1 комментарий
Теги:
web

1 ответ

0

это не правильно написано синтаксис.

изменить это

$(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");
});
Поделиться
  • 0
    Исправил это, спасибо.
  • 0
    Я попробовал этот код лошадь, проблема в том, когда экран изменяет его размер в основном ... ну, скажем, высота 300, а затем вы увеличиваете экран, и это установит высоту до 320, но если вы снова измените размер экрана он устанавливает его на 340 ... так эффективно, если вы перетаскиваете или изменяете размер экрана, происходят плохие вещи XD
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню