[英]Increase div to one direction using css only
I have this code that I need the div to resize vertically as the text inside increases. 我有这段代码,我需要div在内部文本增加时垂直调整大小。 The bottom should remain fixed as div increases upwards 随着div的增加,底部应保持固定
<div class ="div-increase">commodo sit amet, posuere lobortis quam. Vestibulum d
</div>
How can I achieve this using css 如何使用CSS实现此目标
.div-increase{
position: relative;
display: inline-block;
width: 210px;
height: 100px;
max-width: 210px;
max-height: 250px;
min-height: 1.5em;
border: 1px solid blue;
padding: 3px;
border-radius: 10px;
line-height: normal;
color: red;
}
you can achieve this using flexbox with flex-direction: column-reverse
. 您可以使用带有flex-direction: column-reverse
flexbox实现此目的。 I've also made the div editable, so you can try the snippet typing some extra text: 我还使div可编辑,因此您可以尝试在代码段中输入一些额外的文本:
.div-increase { position: relative; display: flex; flex-direction: column-reverse; width: 210px; height: 100px; max-width: 210px; max-height: 250px; min-height: 1.5em; border: 1px solid blue; padding: 3px; border-radius: 10px; line-height: normal; color: red; }
<div class="div-increase" contenteditable="true">commodo sit amet, posuere lobortis quam. Vestibulum d </div>
here is my favorite flexbox cheat-sheet , the official docs and browser support 这是我最喜欢的flexbox 备忘单 ,官方文档和浏览器支持
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.