时间戳

首页 > 解决方案 > flexbox子元素内部div的高度

html - flexbox子元素内部div的高度

问题描述

我们一直在寻找整个网络，但找不到一个看似无法解决的问题的解决方案，基本上我们有两个高度需要相等的 div。在它们中，我们有多个其他 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>

我们如何才能使图像下方的两个框高度相等？任何帮助表示赞赏！

标签： htmlcssflexbox

解决方案

没有 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>

推荐阅读