Question

当用户减小浏览器窗口的宽度时，如何使div增加其高度以适合其中包含的文本？因为我不能减少字体大小，并且在一定宽度之后容器应该保持宽高比，我有点迷失它。

我正在使用MaterialiseCSS，我尝试使用card-content类，以及卡本身的min-height标记。

#about-us-desktop-container {
  position: relative;
  top: 20vw;
  width: 73vw;
}
.big-card {
  padding-bottom: 5.847vw;
  min-height: 35.88194444444444vw;
}
.brush-icon {
  position: absolute;
  top: 69px;
  left: 9vw;
  width: 72px;
}
.leaf-icon {
  position: absolute;
  top: 69.7px;
  left: 8vw;
  width: 68.6px;
  height: 65.6px;
}
.heart-icon {
  position: absolute;
  left: 5.5vw;
  top: 68px;
  width: 68px;
}
.about-us-info {
  position: relative;
}
.about-us-text-container {
  position: relative;
  top: 191.3px;
  min-height: 15.972222vw;
  border-left: #E7E7E7 solid 2px;
  padding-left: 3.611111112vw;
}
.about-us-caption {
  font-size: 1.7rem;
  font-weight: 600;
  text-align: left;
}
.about-us-text {
  font-size: 1.1rem;
  position: relative;
  top: 36.3px;
  color: #9A9A9A !important;
  text-align: left;
  max-width: 237.6px;
  font-weight: 400;
  line-height: 32px !important;
}
.first-text-container {
  border: 0 !important;
  left: 1.38vw;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

<div class="container" id="about-us-desktop-container">
  <div class="col s12 card big-card z-depth-2">
    <div class="row card-content">
      <div class="col s4">
        <div class="about-us-info center">
          <img class="brush-icon info-icon" src="public/brush.svg" />
          <div class="about-us-text-container first-text-container">
            <p class="about-us-caption flow-text">Lorem by
              <br/>99 amet egestas</p>
            <p class="about-us-text light">Aenean feugiat erat vel euismod feugiat. Aenean ut lectus iaculis, dignissim dui vitae, varius nibh!</p>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="about-us-info center">
          <img class="leaf-icon info-icon" src="public/leaf.svg" />
          <div class="about-us-text-container">
            <p class="about-us-caption flow-text">Lorem Ipsum
              <br/>Aliquame</p>
            <p class="about-us-text light flow-text">mattis metus sed enim luctus, nec aliquam sapien pellentesque. Cum sociis natoque penatibus ipsum a maximus laoreet</p>
          </div>
        </div>
      </div>
      <div class="col s4">
        <div class="about-us-info center">
          <img class="heart-icon info-icon" src="public/heart.svg" />
          <div class="about-us-text-container">
            <p class="about-us-caption flow-text">Only 20 Ipsum
              <br/>in the Lorem!</p>
            <p class="about-us-text light flow-text">Nec elit nec suscipit. Aliquam erat volutpat. Vivamus efficitur et lorem non gravida. Vivamus pharetra blandit sagittis</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And here is the result I'm currently getting

Answer 1

这是因为您使用绝对位置移动图像。使用此运算符，div元素不会将它们识别为内容的一部分。此外，您将文本按下位置相对和顶部，div无法识别。试着漂浮你的元素。

如何增加div的高度以适应内容？

1 个答案: