如何增加div的高度以適應內容？

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頂部所識別的文字向下推。試着寧願浮動你的元素。