html - ULに親のサイズを変更させる適切な方法は何ですか？

Question

親のサイズを変更するために、順序付けられていないアイテムのリストを取得するのに少し問題があります。

私はこのようなものを持っています

HTML

<div class="content">
    <div id="product-range">
        <ul>
            <div class="product-container">sup</div>
            <div class="product-container">sup</div>
            <div class="product-container">sup</div>
            <div class="product-container">sup</div>
            <div class="product-container">sup</div>
        </ul>
    </div>
</div>

CSS

.content {
    position:relative;
    background:white;
    max-width:1299px;
    margin: 0 auto;
    padding:0;
}
#product-range {
    position:relative;
    margin-left:25px;
    margin-right:15px;
    background:blue;
}
.product-container {
    position:relative;
    width:398px;
    height:500px;
    float:left;
    margin-right:20px;
    margin-top:15px;
    background:green;
}

その結果、 http：//jsfiddle.net/qfUTq/になります

親は何にも崩壊しません。私がこれを回避することができた唯一の方法は、次のclear:bothような空のdivを追加することです。

http://jsfiddle.net/eE6XQ/

これを行うための適切な方法はありますか？同じプロパティを他のすべてのクラスまたはIDに追加しようとしましたが、同じ効果は得られません。

Answer 1

＃product-rangeでオーバーフロープロパティを使用して再生：auto、scroll、...;

私はoverflow：autoがあなたの問題を解決できないと思いますが、それはそうするための最良の方法ではありません。

Answer 2

overflow: hidden を #product-range に適用すると、要素がラップされます。