IPB, WordPress, IP.Board, php-Fusion, Invision Power Board

Как выровнять div блоки по высоте

0

  Все веб разработчики рано или поздно сталкиваются с проблемой выравнивания блоков по высоте, а именно с тем, как выровнять div блоки с текстами в них. Для ясности приведу такой пример: допустим секция вашей страницы состоит из 4-х блоков, в которых расположен текст, причем длинна текста в каждом из них колеблется от 40 до 120 символов, и необходимо их сделать равными вне зависимости от количества текста.

По ширине блоки можно выравнять выставив равное значение width в % либо используя адаптивную сетку из bootstrap.css, при этом блоки примут совершенно разный размер по высоте, что ощутимо испортит внешний вид страницы!

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

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

И так, как это выглядит, у нас 4 блока, длинной по 25%, то есть по ширине они одинаковы:

.block {width:25%}
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>

ЗАДАЧА: выровнять div блоки по высоте адаптивно и с различном содержанием текста в них.

Для решения вопроса, необходимо скачать и подключить крошечный js-модуль equal.js, добавив следующее в заголовке, после строки подключения модуля jquery.js

<script src="equal.js"></script>

Если кому, не очень нравится использовать огромный модуль bootstrap со всеми его прелестями, предлагаю скачать небольшой grid.css, который вполне сгодится для создания адаптивных блоков или адаптивной сетки.

Создавать блоки можно по тому же принципу, что и с bootstrap.

Подключаем grid.css.

<link rel="stylesheet" href="grid.css">

Создаём 4 блока с помощью сетки grid.css.

<section>
<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6">текст</div>
   <div class="col-md-3 col-sm-6">текст</div>
   <div class="col-md-3 col-sm-6">текст</div>
   <div class="col-md-3 col-sm-6">текст</div>
 </div>
</div>
</section>

Теперь добавим к каждому класс «equal».

<section>
<div class="container">
 <div class="row">
   <div class="col-md-3 col-sm-6 equal">текст</div>
   <div class="col-md-3 col-sm-6 equal">текст</div>
   <div class="col-md-3 col-sm-6 equal">текст</div>
   <div class="col-md-3 col-sm-6 equal">текст</div>
 </div>
</div>
</section>

И наконец, добавим функцию, с помощью которой можно будет выровнять div’ы по высоте, дописав в конце html документа, перед тегом </body>, следующий код.

<script>
jQuery(window).load(function(){
  jQuery('.equal').equalHeights();
});
</script>

загрузить equal.js

Посмотреть работающий пример можно здесь.

Ну вот и всё, блоки по высоте выравнены, причем адаптируются к размеру экрана. Можете изменить размер окна браузера и обновить страницу с примером.

Это элементарное решение позволит Вам выравнивать блоки текстов на лендингах, главных страницах и тп. Главная страница этого сайта сделана как раз с помощью этого приёма.

Leave A Reply