Высота внутренних элементов в дочернем элементе flexbox - PullRequest
Новая
       7

Высота внутренних элементов в дочернем элементе flexbox

0 голосов
/ 11 сентября 2018

Мы искали всю сеть, но не можем найти решение, казалось бы, неразрешимой проблемы, в основном у нас есть два элемента, которые должны быть равны по высоте. В них у нас есть несколько других div, которые должны масштабироваться вместе с ними. Мы пробовали 100% высоту, flexbox, наследование, переполнение скрыто и другие вещи, о которых мы могли подумать. Безрезультатно.

Это упрощенное представление о том, что мы получили: 

.col-sm-12 {
  width: 100%;
  display: flex
}
.col-sm-6 {
  width: 50%;
  float: left;
  flex: 1;
}
.c1 {
}
.c2 {
  padding: 20px;
}
.c3 {
  border: 1px solid grey;
  padding: 20px;
}
.image {
  width: 100%;
  height: 300px;
  background-color: grey;
}
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <div class="col-sm-12">
    <div class="col-sm-6">
      <div class="c1">
        <div class="c2">
          <div class="image">

          </div>
          <div class="c3">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="c1">
        <div class="c2">
          <div class="image">

          </div>
          <div class="c3">
            <p>
              Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Как мы можем получить два поля под изображением равной высоте? Любая помощь приветствуется!

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Просто используйте встроенный стиль текста div теги: 

style="height:30em;overflow:scroll"

лол. Там может быть много новых, ярких и сексуальных фреймворков и технологий (которые мне действительно нравятся), но иногда возвращение к старым школьным методам намного проще и эффективнее.

0 голосов
/ 11 сентября 2018

В CSS нет метода выравнивания высот элементов, которые не имеют общего родителя.Если верхнее изображение всегда одинаковой высоты между столбцами , вы можете использовать flexbox, чтобы расширить меньший / более короткий столбец.

.col-sm-12 {
  display: flex;
}

.col-sm-6 {
  width: 50%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c1 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c2 {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.c3 {
  border: 1px solid grey;
  padding: 20px;
  flex: 1;
}

.image {
  width: 100%;
  height: 300px;
  background-color: grey;
}
<div class="col-sm-12">
  <div class="col-sm-6">
    <div class="c1">
      <div class="c2">
        <div class="image">

        </div>
        <div class="c3">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur dui quis arcu varius, sit amet consectetur risus auctor. Nulla id mattis ligula. Aliquam euismod dui et viverra ultrices. Praesent eget quam quam. Aenean sit amet lectus et leo
            ultrices sodales id sed nulla. Proin fringilla, dui vitae tincidunt tincidunt, nisi tellus efficitur lacus, ac facilisis libero elit ut tellus. In finibus tortor leo, hendrerit sagittis libero maximus sed. Sed rhoncus maximus odio, nec vestibulum
            enim fringilla ac. Nulla faucibus, justo nec fermentum blandit, est nisl eleifend purus, non pretium orci sapien at eros. Fusce non laoreet augue. Aenean ac eros augue. Sed sit amet enim sit amet lorem finibus volutpat. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Mauris placerat, diam sed vulputate aliquet, augue erat luctus massa, molestie egestas diam metus at dolor. Vivamus a metus vitae magna dignissim pulvinar.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="c1">
      <div class="c2">
        <div class="image">

        </div>
        <div class="c3">
          <p>
            Etiam id ullamcorper augue, a pharetra nisi. Sed justo enim, malesuada elementum erat non, vehicula varius turpis. Sed quis scelerisque eros, in vestibulum mi. Maecenas et consectetur risus, sed sagittis ex. Aliquam vestibulum fermentum hendrerit. Nulla
            eget hendrerit purus. Suspendisse commodo vel tortor ut sollicitudin.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...