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上玩溢出属性：自动，滚动，...;

我想溢出：自动无法解决您的问题，但这不是最好的方法。

Answer 2

将overflow：hidden应用于#product-range，它将包围元素。

让UL改变其父母大小的正确方法是什么？

2 个答案: