当用户减小浏览器窗口的宽度时,如何使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>
答案 0 :(得分:0)
这是因为您使用绝对位置移动图像。使用此运算符,div元素不会将它们识别为内容的一部分。此外,您将文本按下位置相对和顶部,div无法识别。试着漂浮你的元素。