Решение для гибких высот

Question

У меня есть 4 столбца, и я решил установить для них значение высоты, так как мне кажется, что они появляются в одной строке, но я работаю над гибкой компоновкой, я имею в виду, когда браузер уменьшилось и страница стала более узкой, высота ящиков должна увеличиться. Итак, как я устанавливаю высоту ящиков равномерно, не устанавливая значение высоты?

Answer 1

Вы хотите, чтобы все столбцы были одинаковой высоты, если я правильно понимаю.

Вы можете исправить это путем отображения дивы в качестве ячеек таблицы, например:

HTML:

<div> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 

CSS:

body > div { 
    display: table; 
    width: 100%; 
} 
div > div { 
    display: table-cell; 
    width: 25%; 
} 

Также проверьте этот demo. Нажмите в первой колонке, чтобы добавить дополнительный текст (только так вы можете увидеть, как это работает.

Answer 2

Вы можете, но для этого вам понадобится javascript.

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

Вы можете создать свой собственный с помощью javascript. или используйте flexbox polyfill

Answer 3

Есть много способов для достижения этой цели. Попробуйте ссылку ниже.

http://css-tricks.com/fluid-width-equal-height-columns/

Demo