На скрине показано все: Красный - информация из-за которой деформируются блоки Зеленый - заголовок этой информации Синий - сами блоки Охра (темно-желтый) - другая информация написанная в блоках Вопрос, как сделать так, чтоб эти 3 блока зависели друг от друга и при вытяжении любого из них, остальные вытягивались вместе с ним Конкретно это написано на css + php Могу предоставить еще информацию. css: .block_server{box-sizing:border-box;width:350px;border:1px solid #37373b;background:#070707;padding:3px;font-size:16px;height:100%;margin-left:-5px;margin-right:-5px;} блоков несколько, но они идут по 3 в строку
вот тут подробный гайд по flex или изучи и поставь bootstrap 4 там все префиксы для говнобраузеров проставлены (наверное ) и не надо с этим заморачиваться но в любом случае, лучше знать как работает то, чем пользуешься Есть еще один вариант - написать скрипт , который будет измерять высоту блоков и давать всем самую большую
суть в том что написан один шаблон на php и с помощью просто строк данных он изменятся (писал сам) но я не знаю как это выровнять, ибо по сути css задан один, для одного блока и эти блоки копируются Знаю достаточно много в php html sql js css и т.д. Чувствую себя как 9-тиклассник, который пропустил 1 тему классе в 3-4 ибо знаю сложные вещи, а такой простой хе*ни не знаю и не могу написать
@paschaopencart, вот зачем костыли предлагать? Мало того, что костыль, так еще и требующий подключения библиотеки. И не исключено, что версия 3.x не прокатит.
Читал читал так ничего и не понял. Если контент не вмещается куда ему деваться? Или верхний должен прятаться а нижний всегда быть внизу? .parent {display: flex; flex-direction: column; height: 500px} .children_top {overflow: hidden; text-overflow: ellipsis;} .children_bottom {margin-top: auto}
P.S. Вообще проблема в том что показатель height 100%, и из-за этого естественно блоки растягиваются и в пикселях делать не вариант, что с этим можно сделать? --- Добавлено --- Он растягивается вверх и вниз...
Тебе просто по максимальному сделать нужно? PHP: .container { display:table; width:100%; } .row { display: table-row; } .col { display: table-cell; }