当用户减小浏览器窗口的宽度时,如何使 div 增加其高度以适应其中包含的文本?由于我不能减小字体大小,并且在一定宽度后容器应保持纵横比,所以我有点迷失了。
我正在使用 MaterializeCSS,并尝试为其使用 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>
最佳答案
这是因为你用绝对位置移动你的图像。使用此运算符,div 元素不会将它们识别为内容的一部分。您还使用 div 无法识别的相对位置和顶部将文本向下推。尽量让元素 float 。
关于html - 如何增加 div 的高度以适应内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39007017/