Question

我有这两个div。当div填满单词时，内部div需要调整外部div的大小。简单地，外部div应该随着内部div的内容增加而调整大小。

注意：内部div向上增加高度，因此外部div也应向上增加

查看这个小提琴https://jsfiddle.net/kevinrobert3/zguo4vbc/51/ 随着内部div中单词的增加和div高度的增加，我需要外部div也要匹配并增加

<div class="wrapper" id="in">
  <div class="inner-div" id="inner-div">
    it is a long established fact that a reader will be distracted by 
    the readable content of a page when looking at its layout. 
  </div>
</div>

它的css是

.wrapper{
    width:70%;
    max-height: 500px;
    min-height: 150px;
    position: relative;
    background-color: aqua;
    top: 90px;
    height: auto;

}
.wrapper .inner-div  {
    position: absolute;
    display: inline-block;
    bottom: 0px;
    max-width: 230px;
    min-height: 1.5em;
    border: 2px solid blue;
    margin-left: 55px;
    padding: 4px;
    border-radius: 4px;
    line-height: normal;
    color: red;
}

Answer 1

我认为这是因为您的{-{1}}位于您的inner-div中。删除它可以解决您的问题。但是也许您由于其他原因需要它吗？

Answer 2

您可以使用

display: flex;
align-items: flex-end;

在.wrapper中

并在position: absolute;中删除.inner-div。像这样： https://jsfiddle.net/1zfwso06/

仅根据其他div CSS中的增加来调整div的大小

2 个答案: