html - 自动扩展 div 的背景颜色及其内容

Question

我有一个 div，里面有三个段落。父 div 设置了背景色。当段落内容增加时，我想垂直扩展父 div 的 height。

HTML:

<div class="cart-item"> 
    <p class="item-name">We will reinforce some test dat some test data</p>  
    <p class="item-price">25.87</p>
    <p><input type="text" id="txtCount" maxlength="2" class="prod-qty" name="quantity" value="1"></p>   
</div>

CSS:

.cart-item {
    line-height: 30px;
    clear: both;
    padding: 0.3em;
    /* background: #eeeeee; */
    /* border: 1px solid #DDDDDD; */
    color: #333333;
    background: #eeeeee repeat-y;
}

.cart-item p {
    float: left;
}

Answer 1

您可以简单地添加:

.cart-item {
    overflow: hidden;
}

或者使用清除修复:

.cart-item:after {
    content: "";
    display: table;
    clear: both;
}