Как установить высоту div на основе класса div рядом с ним? [Дубликат]

Question

Как установить высоту div на основе класса div рядом с ним? [Дубликат]

0

Итак, у меня есть следующий макет:

<div class="double_column_left">
    //Left responsive content
</div>
<div class="double_column_right">
    //Right responsive content
</div>

<div class="double_column_left">
    //More left responsive content
</div>
<div class="double_column_right">
    //More right responsive content
</div>

Мне нужно, чтобы высота каждого набора столбцов (каждая слева и справа рядом друг с другом) была одинаковой. Поэтому, если левый выше, чем правый, он установит правый столбец на высоту слева в Javascript и наоборот.

Это похоже на что-то легко выполняемое в Javascript/jQuery, каким-то образом перебирая страницу и сопоставляя каждый набор div в зависимости от того, какой порядок он набирает при каждом изменении страницы; но я никогда не делал ничего подобного раньше и не могу придумать, как это сделать.

Есть идеи?

user3420034 14 март 2014, в 15:13

Источник

0

@ 3rror404 Спасибо за ссылку на это, хотя это скорее CSS, а не Javascript, с которым я пытаюсь работать.
user3420034 14 март 2014, в 13:54
0

посмотрите на ответы с 4 голосами "за", если не из нижеприведенного полезны
Turnip 14 март 2014, в 14:04
0

@ 3rror404 Я остановился на решении Flexbox для этого другого поста, поскольку это помогло решить несколько других проблем, которые у меня были, а также эту проблему.
user3420034 14 март 2014, в 14:16

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

css3

4 ответа

0

Попробуйте это решение:

Измените высоту одного div '.double_column_right' и примените его к мини-высоте div ('.double_column_left'). Используйте следующий код JQuery:

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

Aniruddha Pondhe 14 март 2014, в 12:20

0

Это приведет к тому, что все столбцы будут равны всем правам столбцов:

Jquery

var col1 = $(".double_column_left").height(),
    col2 = $(".double_column_right").height();
if (col1 > col2) {$(".double_column_right").height(col1); } else {
    $(".double_column_left").height(col2);
}

http://jsfiddle.net/qExTz/

DreamTeK 14 март 2014, в 11:23

0

Это сделает все столбцы одинаковой высоты, а не только парами.
Oscar Paz 14 март 2014, в 13:38
0

Вы правы, я неправильно понял вопрос.
DreamTeK 14 март 2014, в 13:42

0

Попробуй это

$('.double_column_right').height(function () {
    return $(this).prev().height();
});

Anton 14 март 2014, в 11:15

0

Я не согласен с вашим ответом, а что если все наоборот? ;-)
nietonfir 14 март 2014, в 13:34
0

Затем измените селектор и используйте .next() ? С чем ты не согласен?
Anton 14 март 2014, в 13:35
0

Вы бы в конечном итоге с той же проблемой. Вы должны сначала проверить, какой из столбцов больше, а затем изменить другой.
nietonfir 15 март 2014, в 22:56

Показать ещё 1 комментарий

Ещё вопросы

@ 3rror404 Спасибо за ссылку на это, хотя это скорее CSS, а не Javascript, с которым я пытаюсь работать.
посмотрите на ответы с 4 голосами "за", если не из нижеприведенного полезны
@ 3rror404 Я остановился на решении Flexbox для этого другого поста, поскольку это помогло решить несколько других проблем, которые у меня были, а также эту проблему.
Это сделает все столбцы одинаковой высоты, а не только парами.
Вы правы, я неправильно понял вопрос.
Я не согласен с вашим ответом, а что если все наоборот? ;-)
Затем измените селектор и используйте .next() ? С чем ты не согласен?
Вы бы в конечном итоге с той же проблемой. Вы должны сначала проверить, какой из столбцов больше, а затем изменить другой.

Oscar Paz · Accepted Answer · 2014-03-14T12-19-00.000Z

Это должно работать:

function resizeColumns() {
    var $leftColumns = $('.double_column_left');
    $leftColumns.each(function() {
        var $leftCol = $(this);
        var $rightCol = $leftCol.next('.double_column_right');
        var height = Math.max($leftCol.height(), $rightCol.height());
        $leftCol.add($rightCol).height(height);
    });
 }

Теперь вы просто вызываете эту функцию, когда вам нужно изменить размер столбцов. Особенно, при загрузке страницы и при изменении размера окна:

 $(document).ready(resizeColumns);
 $(window).on('resize', resizeColumns);