下面的CSS和HTML有什么问题？

以下是截图：

正如您所看到的，一个

与另一个

重叠。为什么会这样？以下是该页面的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.productCat

中添加一个

clear

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

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

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

---

编辑：我打字时，好像有人发布了相同的答案。祝你好运

据我所见，

div.catDiv

太宽了，我将其设置为

200px

，这似乎解决了问题。我不知道它是太宽还是太窄，但你可以一直玩到适合你的需要为止

css

html

---

Div.catDiv的宽度只有320px。因此，sub1Cat1和Sub2Cat1将合并。我认为您需要在屏幕截图中使用float（Div.rightDiv和Div.mainCatDiv）后清除，我无法分辨重叠的内容。请提供一些关于你期待的外观的细节。考虑使用一个简单的菜单模式：当请求CSS/HTML帮助时，最好是发布实际的HTML和CSS——而不是后端脚本。这似乎已经完成了这个技巧，但我不明白为什么。我尝试在mainCatDiv中添加
clear:both
，mainCatDiv是浮动元素的父元素，但没有成功。你能解释一下吗。浮动的CATDiv在非浮动元素的“上方”，在正常流的“外部”，因此mainCatDiv看起来没有任何高度，因为它的所有子对象都是浮动的。使用clear:left（或两者）有效，因为它指示productCat div确保它在左侧（或左侧和右侧）有空间。另一种方法是在mainCatDiv中添加
overflow:hidden
，这将迫使它承担其内容的高度。有很多方法可以做到这一点。
div.productCat { clear:left; background-color:#333; height:33px; width:100%;  }

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

<div<div class="rightDiv">
    <div class="mainCatDiv">
        <div class="catDiv">
            <h2><a href="#">Catalog 1</a></h2>
        </div>
        <div class="catDiv">
            <h2><a href="#">Catalog 2</a></h2>
        </div>
        <div class="catDiv">
            <h2><a href="#">Catalog 3</a></h2>
        </div>
    </div>
    <div class="productCat">

    </div>
</div>