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>

即可實現高度自適應。

效果如下：