Доброго времени суток. Есть вот это:
#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;
}
Какой-то очень очень очень очень очень очень очень очень длинный текст
Какой-то очень очень очень очень очень
акой-то очень очень очень очень очень очень оч
ой-то очень очень очен
акой-то очень очень очень очень очень очень очакой-то очень очень очень очень очень очень оч
очень очень очен очень очень очен
В каждом блоке есть картинка и текст под ней. Однако в каждом блоке текст может быть разной длины (в разумных пределах, разумеется). Тем не менее получается, что картинки пляшут (смотри пример выше). Ах да, стоит ещё отметить, что количество таких блоков в ряд зависит от ширины экрана.
Было бы замечательно, если бы высота блоков автоматически регулировалась и имела везде одну высоту.
Ввиду недостаточного опыта я представляю себе только два варианта: сделать все блоки какой-то одной максимальной ширины (но этот вариант мне не сильно нравится, т.к. может статься так, что все блоки будут иметь мало текста) или применить 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');
Может есть какой-то другой вариант о котором не подозреваю?
Ответ
#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; }
Какой-то очень очень очень очень очень очень очень очень длинный текст
Какой-то очень очень очень очень очень
акой-то очень очень очень очень очень очень оч
ой-то очень очень очен
акой-то очень очень очень очень очень очень очакой-то очень очень очень очень очень очень оч
Комментариев нет:
Отправить комментарий