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

Question

[ILoveYAnny]

Бьюсь второй день, я уверен что есть грамотной решение как выровнить по вертикали разные блок, кроме табличной вёрстки. Нужно как то грамотно растянуть блоки, конечно можно указать высоту им, но тогда я думаю этто отразится на адпативности, да и внутреннее содержимое на Bootstrap (Слайдеры, аккордионы и т.д.) правильно растягиваться не будут. С выравниваем по ширине не каких проблем, а вот с вертикалью .... Подскажите как ? Будет супер, если можно сделать на Bootstrap

Answer 1

[Pretor DH]

Вот статья про 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;
}

Answer 2

[teotlu]

Используйте display: table, display: table-row и display: table-cell, при адаптации под другой экран, если что, просто замените на display: block, или что вам там будет нужно.
Либо, если вы можете себе позволить IE10+, используйте flexbox. Либо flexbox с полифиллом Flexie.js, тогда и под младшие IE пойдёт. Но это уже изврат, мне кажется.
Плюс, в интернете полно вариантов, являющихся костылями в основном.

Comments

[ILoveYAnny]

А насколько адаптивен display: table ? И на сколько кроссбраузерен flexbox ?

[teotlu]

ILoveYAnny: caniuse.com/#search=flex — кроссбраузерность флексбокса. А что вы подразумеваете под адаптивностью display: table? По сути display: table заставляет блок отображаться в режиме таблицы. Просто, если у вас адаптивная вёрстка, то для другого размера экрана вы можете этому блоку прописать display: block (или любой другой display), и он будет себя вести как обычный блок.