html - 以下 CSS 和 HTML 有什么问题？

Question

以下是截图: .

正如你所看到的 <div>与另一个重叠<div> 。为什么会出现这种情况？以下是该页面的 HTML 代码片段:

<div class="rightDiv">
        <div class="mainCatDiv">
            @foreach (var cat in Model.SubCategories)
            {
                <div class="catDiv">
                    <h2>@Html.ActionLink(cat.CategoryName, "Catalog", "Browse", new { id = cat.CategoryName }, null)</h2>
                </div>
            }
        </div>
        <div class="productCat">

        </div>
    </div>

这是这些 <div>'s 的 CSS 代码

div.rightDiv { float:right; width:750px; }
div.mainCatDiv { width:100%;  padding:0px 0 0 70px; }
div.catDiv { float:left; width:320px; min-height:50px; padding-left:30px; }
div.productCat { background-color:#333; height:33px; width:100%;  }

Answer 1

最简单的解决方案可能是修改您的productCat div以包含clear:left，如下所示:

div.productCat { clear:left; background-color:#333; height:33px; width:100%;  }

这将迫使您的产品 div 低于类别 div。

编辑:看起来在我打字时其他人发布了相同的答案。祝你好运!