div根据内容高度自适应地调整高度

div根据内容⾼度⾃适应地调整⾼度
需求为根据来访理由的内容⾼度，⾃适应地调整来访理由这个横栏的⾼度。

原效果图如下：
其html为：
解决⽅法：
我们设置这个横栏的⾼度为⾼度⾃适应。

即
.visitReasonArea{
height: auto;
}
效果如下：
我们发现并没有⽣效，原因在于left和right都设置了绝对定位。

因此，我们可以通过position:unset消除right的绝对定位。

原css为
#visitReason{
width: 60%;
}
我们改为：
#visitReason{
width: 60%;
position: unset;
}
效果如下：
但是，我们发现width的作⽤失效了，原因为span在浮动或绝对定位后可以设置宽⾼，但是unset之后，span没有了绝对定位，⽽普通的span⽆法设置宽⾼。

因为，我们把span改为内联块级元素。

即
#visitReason{
width: 60%;
position: unset;
display: inline-block;
}
效果如下：
但是，我们发现right把left盖住了，我们可以设置left为相对定位，从⽽占据原有空间，⽽不被盖住。

即给left新增⼀个类，名叫visitReasonLeft，并设置其为相对定位。

<div class="item visitReasonArea">
<span class="left visitReasonLeft" data-i18n-text="visitReason"></span>
<span class="right" id="visitReason"></span>
</div>
.visitResonLeft{
position: relative;
}
效果如下：
但是，来访理由并未右对齐，我们可以设置right右浮动，即
#visitReason{
width: 60%;
position: unset;
display: inline-block;
float: right;
}
效果如下：
由于，right变成浮动元素，因此脱离了⽂档流，使得⾼度⽆法⾃适应。

因此，我们需要清除浮动。

即加上clearfix。

.clearfix{
clear:both;
}
<div class="item visitReasonArea">
<span class="left visitResonLeft" data-i18n-text="visitReason"></span>
<span class="right" id="visitReason"></span>
<div class="clearfix"></div>
</div>
即可实现⾼度⾃适应。

效果如下：。