ILoveYAnny
@ILoveYAnny

Как организовать правильное вертикальное выравнивание div'ов?

Бьюсь второй день, я уверен что есть грамотной решение как выровнить по вертикали разные блок, кроме табличной вёрстки. Нужно как то грамотно растянуть блоки, конечно можно указать высоту им, но тогда я думаю этто отразится на адпативности, да и внутреннее содержимое на Bootstrap (Слайдеры, аккордионы и т.д.) правильно растягиваться не будут. С выравниваем по ширине не каких проблем, а вот с вертикалью .... Подскажите как ? Будет супер, если можно сделать на Bootstrap
181b61954faa4a339da588f63cf4d35b.jpg
  • Вопрос задан
  • 2443 просмотра
Решения вопроса 1
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Вот статья про Bootstrap и 3 колонки одинаковой высоты.
Но лично мене не нравится такое решение.

Вот решение в 3 правила адаптивное по ширине и высоте .

<main>
    <div>
        <p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>Span</p><p>Span</p>
    </div>
    <div>
        <p>Span</p><p>SpanSpanSpanSpan</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p><p>Span</p>
    </div>
</main>

main {
    position:relative;     /* должно быть отлично от static */
    overflow:hidden;
}
div {
    vertical-align:top;
    position:relative;
    display:inline-block;
    z-index:1;             /* заменить на background:gray; если плохо использовать z-index */
}
div:after {
    content:'';
    position:absolute;
    left:0;right:0;
    bottom:-1000%;      /* здесь максимально возможная разница между блоками в процентах (здесь х10)*/
    top:0;z-index:-1;      /* заменить top на top:100%; если нужно забрать z-index */
    background:gray;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
teotlu
@teotlu
Навёрстываю упущенное
Используйте display: table, display: table-row и display: table-cell, при адаптации под другой экран, если что, просто замените на display: block, или что вам там будет нужно.
Либо, если вы можете себе позволить IE10+, используйте flexbox. Либо flexbox с полифиллом Flexie.js, тогда и под младшие IE пойдёт. Но это уже изврат, мне кажется.
Плюс, в интернете полно вариантов, являющихся костылями в основном.
Ответ написан
@amaduha
Вот здесь хорошо описано как выровнять блок
Ну или просто смотрите готовый пример
А так то конечно с появлением flexbox вопрос должен быть исчерпан. Другой вопрос, что он пока поддерживается не везде (:
Ответ написан
Ваш ответ на вопрос

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

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