eq-col1

Выравнивание колонок по высоте при разных разрешениях экрана выглядит так:

При больших разрешениях

При меньших разрешениях

Если не применять выравнивание по высоте,  картина будет такой:

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

script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
jQuery(function($){
//Пишем функцию
function my_equalH(){
$('.row-equal-height').each(function(){
var maxH = 0;
$('.eq_column', $(this) ).each(function(){
$(this).css( 'height', 'auto' );
if( $(this).outerHeight(true) > maxH ){
maxH = $(this).outerHeight(true);
}
});
if ($(window).width() > '752') {
$('.eq_column', $(this) ).css( 'height', maxH + 'px' );
}
});
}
//Вызывает функцию на событие загрузки (можно на document.ready) и на изменение окна браузера
$(window).on('load', function(){
my_equalH();
});
$( window ).resize(function() {
my_equalH();
});
});

В этом скрипте применен метод outerHeight(true) для того, чтоб бралась высота с учетом всех отступов. Строчка с цифрой 752 обозначает, что колонки будут выравниваться для ширины окна более 752px (без учета полосы прокрутки 752+16=768px). Это условие задано потому, что в основном при ширине менее 768px происходит перестраивание колонок в одну, и выравнивание уже не нужно. Если у вас другая ширина перестраивания колонок, то возьмите ее, отняв 16px.

Теперь что касается построения html

1
2
3
4
<div class="row-equal-height">
<div class="eq_column col1" style="background: red;">Здесь расположим контент1, который будет выравниваться с контентом2</div>
<div class="eq_column col2">Здесь расположим контент2</div>
</div>

Для наглядности колонкам задан фон.

Translate »
Рейтинг@Mail.ru Яндекс.Метрика