Приведение к одной высоте блоков с разным количеством текста

316

17 февраля 2017, 03:28

Доброго времени суток. Есть вот это:

#wrapper { 
  border: 1px solid black; 
  margin: auto; 
  width: 70%; 
  text-align: center; 
} 
 
.block { 
  margin: 10px; 
  text-align: center; 
  width: 140px; 
  display: inline-block; 
  border: 1px solid black; 
} 
 
.block img { 
  width: 140px; 
}

<div id='wrapper'> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>Какой-то очень очень очень очень очень очень очень очень длинный текст</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>Какой-то очень очень очень очень очень</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>акой-то очень очень очень очень очень очень оч</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>ой-то очень очень очен</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>акой-то очень очень очень очень очень очень очакой-то очень очень очень очень очень очень оч</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>очень очень очен очень очень очен</h4> 
  </div> 
</div>

В каждом блоке есть картинка и текст под ней. Однако в каждом блоке текст может быть разной длины (в разумных пределах, разумеется). Тем не менее получается, что картинки пляшут (смотри пример выше). Ах да, стоит ещё отметить, что количество таких блоков в ряд зависит от ширины экрана.

Было бы замечательно, если бы высота блоков автоматически регулировалась и имела везде одну высоту.

Ввиду недостаточного опыта я представляю себе только два варианта: сделать все блоки какой-то одной максимальной ширины (но этот вариант мне не сильно нравится, т.к. может статься так, что все блоки будут иметь мало текста) или применить js, который перебирает все h4, находит максимальную высоту h4 и применяет её ко всем h4 (смотри ниже)

max = null;
jQuery(".block h4").each(function(i) {
  v = $(this).height();
  if (max < v) {
    max = v;
  }
});
jQuery(".block h4").css('height', max + 'px');

Может есть какой-то другой вариант о котором не подозреваю?

Answer 1

 #wrapper{ 
  display: flex; 
  flex-flow: row wrap; 
  justify-content: space-around; 
} 
.block{ 
  width: 200px; 
  flex-flow: row wrap; 
  border: 1px solid #888; 
} 
.block img { 
  width: 140px; 
  height: 140px; 
}

<div id='wrapper'> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>Какой-то очень очень очень очень очень очень очень очень длинный текст</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>Какой-то очень очень очень очень очень</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>акой-то очень очень очень очень очень очень оч</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>ой-то очень очень очен</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>акой-то очень очень очень очень очень очень очакой-то очень очень очень очень очень очень оч</h4> 
  </div> 
  <div class='block'><img src="http://media.log-in.ru/i/risovanniy_koshara.jpg" alt=""> 
    <h4>очень очень очен очень очень очен</h4> 
  </div> 
</div>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

3D-Transform по окружности вокруг оси Х

Я пытаюсь создать CSS анимацию, которая выглядит, как вращение вокруг картинки или другого объекта div вокруг оси "Х"

279

CSS

Почему не работает анимация и не которые свойства CSS3 на моб Iphone?

Доброго всем дня!

395

CSS

Как сделать маску для ie edge или clip-path?

Добрый день, мне нужно сделать маску для изображения, но ie edge не понимает это свойство: clip-path: polygon(0 0,100% 15%,100% 100%,0 85%); Я прочитал что можно сделать...

650

c++

Разное поведение программы на Win7 и WinXP

Есть такой код (минимальный рабочий пример):

363