CSS内容溢出包含div

Question

目前遇到一些DIV重叠其包含的DIV的问题。请参见下面的图像（底部的3个产品）：

页面的所有正文内容都位于#content DIV中：

div#content {
    width: 960px;
    float: left;
    background-image: url("../img/contentBg.png");
    background-repeat: repeat;
    margin-top: 10px;
    line-height: 1.8em;
    border-top: 8px solid #5E88A2;
    padding: 10px 15px 10px 15px;
}

以下是位于#content div内的产品框的CSS：

.upper {
    text-transform: uppercase;
}
.center {
    text-align: center;
}
div#products {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}
div.productContainer {
    float: left;
    width: 265px;
    font-size: 1em;
    margin-left: 50px;
    height: 200px;
    padding-top: 25px;
    text-align: right;
}

div.product {
    float: left;
    width: 200px;
}
div.product p {
}
div.product a {
    display: block;
}
div.product img {
    float: left;
}
div.product img:hover {
    opacity: 0.8;
    filter: alpha(opacity = 80);
}
div.transparent {
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

这里是盒子的HTML代码：

        <div class="productContainer">
            <div class="product">
                <h2 class="upper center">A2 Print</h2>

                <a href='../edit/?productId=5&amp;align=v' class='upper'>                   <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A2-Print.png" alt="Representation of image printed at A2 Print through Website." /></a>
                <p class="upper">16.5 inches x 23.4 inches<br /><strong>&pound;15.99</strong></p>
                <p class="upper smaller"><em><span><span class="yes">Yes</span> - your picture quality is high enough for this size</span>                  </em></p>

                <p><a href='../edit/?productId=5&amp;align=v' class='upper'><span>Select</span></a></p>                 
            </div>

        </div>

        <div class="productContainer">
            <div class="product transparent">
                <h2 class="upper center">A1 Print</h2>
                <a href='../edit/?productId=11&amp;align=v' class='upper'>                  <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7A1-Print.png" alt="Representation of image printed at A1 Print through Website." /></a>
                <p class="upper">23.4 inches x 33.1 inches<br /><strong>&pound;19.99</strong></p>
                <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>                    </em></p>


                <p><a href='../edit/?productId=11&amp;align=v' class='upper'><span>Select</span></a></p>                    
            </div>
        </div>

        <div class="productContainer">
            <div class="product transparent">
                <h2 class="upper center">Poster Print (60cm x 80cm)</h2>
                <a href='../edit/?productId=12&amp;align=v' class='upper'>                  <img src="../../wflow/tmp/133703b808c91b8ec7e7c7cdf19320b7Poster-Print-(60cm-x-80cm).png" alt="Representation of image printed at Poster Print (60cm x 80cm) through Website." /></a>
                <p class="upper">23.6 inches x 31.5 inches<br /><strong>&pound;13.95</strong></p>

                <p class="upper smaller"><em><span><span class="no">Warning</span> - your picture quality may not be sufficient for this size</span>                    </em></p>

                <p><a href='../edit/?productId=12&amp;align=v' class='upper'><span>Select</span></a></p>                    
            </div>
        </div>

这些DIV重叠的原因是什么？我希望所有的盒子都能如预期地适合#container div中。这让我发疯了！

谢谢

- kaese

Answer 1

你尝试将其设置为页脚了吗？

clear:both;

另外，将其设置为＃content

overflow:hidden;

- stecb

---

谢谢steweb -- 添加以下内容已经解决了问题：将overflow:hidden;添加到div#products中 并且 将div.productContainer设置为height:auto;干杯！ - kaese

在尝试修复一个高度为100%（如上面的例子）且包含动态添加列表的布局后，这是我在 Stack Overflow 上尝试过的几十种解决方案中唯一有效的解决方案。感谢您，先生！ 我理解为什么“clear:both”有效，但我希望我知道为什么“overflow:hidden”对于内容 div 有效，而不会隐藏子 div 的实际溢出文本。CSS 太复杂了 :/ - antimatter

Answer 2

在你的内容div CSS中添加overflow: auto; :)

- benhowdle89

---

那样做不会给内容div添加滚动条吗？使用overflow:hidden可能是一个更好的主意。 - the_

Answer 3

很多人使用的一种技术称为 clearfix。以下是代码：

.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
    .clearfix {display:block;}
/* End hide from IE Mac */

为了使用它，只需将class clearfix添加到容器中。您可能需要将其添加到包含所有“productContainer”的div中。

- jsweazy