Растянуть DIV по высоте родителя

274

16 апреля 2017, 00:30

Ребят, как растянуть все DIVы по высоте родителя при условии:

Высота родителя определяется высотой самого длинного DIVа.
Flexbox не подходит, т. к. в Safari не справляется. К сожалению...
Все, подобное display: table-cell не работает.

Всю голову сломал. Код этого куска:

.main_3_item { 
  float: left; 
  height: auto; 
  background: white; 
  padding: 20px; 
  text-align: left; 
  font-family: 'OpenSans'; 
  font-size: 12px; 
  line-height: 16px; 
  margin: 10px 0; 
  outline: 8px solid black 
}

<div class="row"> 
  <div class="main_3_item col-lg-4 col-md-12 col-sm-12 col-xs-12"> 
    <p>Подготовительная консультация.</p><span>&nbsp;</span> Во время её юрист может уже очертить для себя круг проблем, которые необходимо будет решить. Заказчик и консультант определяются с юрисдикцией, пакетом услуг, необходимой документацией и т.д. 
  </div> 
 
  <div class="main_3_item col-lg-4 col-md-12 col-sm-12 col-xs-12"> 
    <p>Непосредственно регистрация.</p><span>&nbsp;</span> Благодаря большой сети международных партнёров и опыту в юридической сфере, компания осуществляет регистрацию оффшора и предоставляет всю необходимую документацию клиенту. Данная процедура занимает 
    около 7-10 рабочих дней, начиная со дня проведения подготовительной консультации. 
  </div> 
 
  <div class="main_3_item col-lg-4 col-md-12 col-sm-12 col-xs-12"> 
    <p>Дальнейшее юридическое сопровождение оффшорной компании.</p><span>&nbsp;</span> По окончании регистрации и передачи документов клиенту, компания нуждается в дальнейшем обслуживании, чтобы она держалась на плаву. Для этого мы готовы предоставить следующие 
    услуги: оформление юридического адреса, услуга номинального директора/акционера, выплата госпошлин, содействие в открытии счёта в зарубежном банке, услуги аудита. 
  </div> 
</div>

Все это нужно при помощи CSS
Вот сайт — http://a0100957.xsph.ru/
Вот один из таких блоков - http://joxi.ru/eAO0eLXFxaaG0r
Вот как это было в Сафари с flexbox — http://joxi.ru/krD1qL6iEZZLkm, причем тут они благодаря flexbox все одинаковы по высоте

Answer 1

У вас будет работать display: table-cell если вы отключите float. Пока действует float, естественно, он перебивает table-cell

.row { 
  display: table 
} 
.row >div { 
 display:table-cell; 
 border:1px solid red; 
 width:33%; 
}

<div class="row"> 
  <div> 
  123 
  </div> 
    <div> 
  123 
  </div> 
    <div> 
  orem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.  
  </div> 
</div>