Выравнивание блоков по высоте

  • 6 Ответов
  • 422 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

Здравствуйте. Имеется сайт http://adventurezone.ru/. Есть модуль Gaming News. Он меня устраивает, но высота каждого столбца по высоте разная. Я так понимаю это связано с высотой заголовка и высотой текста. Но ведь они не могут всегда быть одинаковыми. Хотелось бы чтобы столбцы были выровнены по высоте за счет пустых мест под текстом. Если кто-нибудь подскажет как это сделать - буду очень признателен...

*

kik84

  • ******
  • 1266
  • 59
Re: Выравнивание блоков по высоте
« Ответ #1 : 06.08.2016, 12:43:31 »
Наверное, через min-height

*

AlekVolsk

  • ********
  • 6301
  • 336
Re: Выравнивание блоков по высоте
« Ответ #2 : 06.08.2016, 16:27:23 »
вариант 1) для всех блоков установить одинаковую высоту, но тогда при изменении ширины блоков придется выеживаться для каждого разрешения экрана
вариант 2) использовать js, примеров в сети вагон. в некоторые css-фреймворки это даже встроено

*

kik84

  • ******
  • 1266
  • 59
Re: Выравнивание блоков по высоте
« Ответ #3 : 06.08.2016, 19:41:20 »
вариант 2) использовать js, примеров в сети вагон.
а как гуглить?

*

fbr

  • ******
  • 1274
  • 140
Re: Выравнивание блоков по высоте
« Ответ #4 : 06.08.2016, 19:49:54 »
"jquery выравнивание блоков по высоте"

Re: Выравнивание блоков по высоте
« Ответ #5 : 08.08.2016, 00:20:34 »
Спасибо за ответ. При использовании min-height блок залезает за тот, что находится под ним. Как это исправить?

*

neogeek

  • ****
  • 203
  • 18
Re: Выравнивание блоков по высоте
« Ответ #6 : 08.08.2016, 08:30:15 »
можно с помощью jQuery выравнивать(.column замените на свой класс - он должен быть у всех блоков которые нужно выровнять по высоте)

Код
<script type="text/javascript">
  var jQuery = jQuery.noConflict();
  function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
      thisHeight = jQuery(this).height();
      if(thisHeight > tallest) {
        tallest = thisHeight;
      }
    });
    group.height(tallest);
  }

jQuery(window).load(function () {
  equalHeight(jQuery(".column"));
});

jQuery(window).resize(function () {
  equalHeight(jQuery(".column"));
});
</script>