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

【问题标题】：Whats wrong with the following CSS and HTML?下面的 CSS 和 HTML 有什么问题？
【发布时间】：2011-10-25 13:47:22
【问题描述】：

以下是截图： .

如您所见，一个<div> 与另一个<div> 重叠。为什么会这样？以下是页面的 HTML 代码 sn-p ：

<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%;  }

【问题讨论】：

Div.catDiv 的宽度只有 320px。所以，sub1Cat1 和 Sub2Cat1 将合并。
我觉得你使用float(div.rightDiv and div.mainCatDiv)后需要清除
从截图中，我无法分辨出什么是重叠的。请提供有关您期望的外观的更多详细信息。
考虑使用简单的菜单模式：jsfiddle.net/Diodeus/jejNy
在寻求 CSS/HTML 帮助时，最好发布实际呈现的 HTML 和 CSS——而不是后端脚本。

标签： html css asp.net-mvc-3 razor

【解决方案1】：

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

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

这将强制您的产品 div 低于您的类别 div。

编辑：看起来有人在我打字时发布了相同的答案。祝你好运！

【讨论】：

这似乎成功了，但我不明白为什么。我尝试在作为浮动元素的父级的 mainCatDiv 中添加 clear:both，但没有成功。你能解释一下吗
当然。浮动的 catDiv 位于非浮动元素的“上方”，位于正常流程的“外部”，因此您的 mainCatDiv 看起来确实具有任何高度，因为它的所有子元素都是浮动的。使用 clear: left（或两者）有效，因为它指示 productCat div 确保它在左侧（或左右）有空间。另一种方法是将overflow:hidden 添加到 mainCatDiv 中，这将迫使它采用其内容的高度。有很多方法可以解决这个问题。

【解决方案2】：

如果我正确阅读了您的问题，this 应该可以解决。您只需将clear 添加到div.productCat。

【讨论】：

【解决方案3】：

据我所见，div.catDiv 太宽，我将其设置为200px，这似乎可以解决问题。我不知道那是太宽还是太窄，但你可以玩它直到它适合你的需要。

http://jsfiddle.net/EdGGY/1/

css

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;}

html

<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>

【讨论】：