Есть ли способ сделать все элементы в классе строк одинаковыми?

Ответ 1

Вы можете сделать это с помощью jQuery:

boxes = $('.well');
maxHeight = Math.max.apply(
  Math, boxes.map(function() {
    return $(this).height();
}).get());
boxes.height(maxHeight);

Вот пример: http://jsfiddle.net/DVnZ6/3/

Ответ 2

Событие изменения размера должно быть добавлено к этому коду, так как высота содержимого в большинстве случаев зависит от разных разрешений и создает нежелательные проблемы с дизайном, такие как переполненный текст.

Здесь более полная версия кода, который поддерживает изменение размера, также

jQuery(function () {

    equalMaxWidth = 500; /* Customize viewport width - for resolutions below this number, the height equalizing will not work */
    boxes = jQuery('.well');

    boxes.removeAttr('style');
    if(jQuery(window).width() > equalMaxWidth){
        equalBoxHeights(boxes);
    };

    window.onresize = function () {
        boxes.removeAttr('style');
        console.log( jQuery(window).width());
        if(jQuery(window).width() > equalMaxWidth){
            equalBoxHeights(boxes);
        };
    };
});

function equalBoxHeights(boxes) {
    maxHeight = Math.max.apply(
            Math, boxes.map(function () {
                return jQuery(this).height();
            }).get());
    boxes.height(maxHeight);
}

Проверьте демо на jsFiddle http://jsfiddle.net/o4w7tjtz/

Совет: попробуйте изменить размер 3-го вертикального фрейма (заметили равные высоты около 500pw ширины?)

Ответ 3

У меня есть более простой способ решить эту проблему в ответном режиме:

 //Make every Tile the same height(depending on the highest in row, no matter whats inside)

$(document).ready(function () {
    var boxes = $('.well');

    //Set the Height as in the example above on page Load
    setHeight();

    // On viewportchange reset the height of each Element and again use the above example to set the heights
    $(window).resize(function() {
        boxes .css('height', 'auto');
        setHeight();
    });

    function setHeight () {
        var maxHeight = Math.max.apply(
                Math, boxes.map(function () {
                    return $(this).height();
                }).get());
        boxes.height(maxHeight);
    }

});

Ответ 4

Если вы установите высоту пролетов на 100% и установите высоту строки на фиксированное значение, все они будут соответствовать высоте контейнера.

Конечно, вам нужно знать ожидаемую высоту столбцов, но это бесплатное решение js.