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>      

即可實作高度自适應。

效果如下：