zorro76
@zorro76

Как правильно задать параметры заголовку блока?

Собственно есть несколько блоков с контентом, высота блоков hight: auto, но вот столкнулся с проблемой: если заголовок h4 включает в себя больше 2 слов, соответственно слетает в нижнюю строчку и тем самым удленяет блок.
На скрине видно: 68b6aff0a56f46788747bb53880d47d4
Как это правильно обыграть, не задавая фиксированной высоты блоку?
Вот как задан заголовок h4
h4{
      color: $heading-color;
      font-size: 26px;
      line-height: 30px;
      margin-bottom: 20px;
    }
    h4::before {
      content: "";
      margin: 10px 15px 10px;
      display: inline-block;
      width: 30px;
      border-bottom: 3px solid $stack-color;
    }
  • Вопрос задан
  • 216 просмотров
Решения вопроса 2
@alexmixaylov
здесь или устанавливать height для блока с заголовком
с учетом того что может быть две строки

или скриптом пробегаться по заголовкам
вычислять максимальную высоту и потом присваивать всем эту высоту
Ответ написан
Комментировать
@Azperin
Дилетант
Я бы предложил использовать джаваскрипт, отлавливаешь высоту всех блоков и задаешь всем по максимальной и делаешь например FadeIn их. Так же сделать отступ слева у заголовка, чтобы при переносе слова, оно было на одном вертикальном уровне с заглавной буквой. Кнопку "Смотреть подробнее" пришпандориваешь к нижней части блока, чтобы они все были на одном горизонтальном уровне вне зависимости от высоты.

Если все заголовки уже придуманы и они влезают целиком или по словам, то ок, если же нет, то я бы посоветовал их продумать, т.к. длинное слово может просто не влезть и придется либо менять шрифт, либо растягивать сами блоки.

Есть еще вариант, перенести заголовок над картинкой в диве с фиксированной высотой в которую гарантированно влезут все заголовки и у всех блоков будет одинаковый футер ввиде картинка+ссылка(смотреть подробнее).
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы