2

На странице использую bootstrap3. Структура некоторой части следующая:

<div class="row">
   <div class="col-md-6">
        <iframe src="..."></iframe>
   </div>
   <div class="col-md-6">
        ....
   </div>
</div>

То есть в ряду две колонки, в одной из них видео с ютуба во фрейме. Нужно сделать одинаковой высоту колонок ряда, т.е. чтобы при масштабировании высота фрейма совпадала с высотой содержимого второй колонки. Нагуглил свойство display:flex; но мне это не помогло. Прошу помощи в решении этой проблемы.

0

2 ответа 2

1

Может такой вариант подойдет

.row-table{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.col-table-cell{
    display: table-cell;
    vertical-align: top;
}
.col-table-cell:nth-of-type(1){
    background: #ccc;
}
.col-table-cell:nth-of-type(2){
    background: #f7f7f7;
}
<div class="row row-table">
   <div class="col-md-6 col-table-cell">
        <iframe src="..."></iframe>
   </div>
   <div class="col-md-6 col-table-cell">
        ....
   </div>
</div>

Fiddle

1
  • Не совсем то, ездит в стороны при масштабировании jsfiddle.net/6mrayrgv/1
    – carapuz
    23 ноя 2015 в 19:01
1
.row-flex {
    display: flex;
    flex-flow: row wrap;
}

В row необходимо добавить еще и row-flex.

1
  • Постарайтесь писать более развернутые ответы. Поясните, на чем основано ваше утверждение? 14 дек 2016 в 8:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.